Page 1 of 1

External link icon

Posted: 23 Apr 2021, 04:04
by metallissimus
I want to add this icon to external links in popup descriptons, but it doesn't show up.
Code
<i class="fas fa-external-link-alt"></i>
I tried inside and outside the <a> element, neither worked.

Probably I am missing something basic, I have not used icons before.

Re: External link icon

Posted: 23 Apr 2021, 04:32
by mjau-mjau
X3 uses font awesome 4.7, so that would be:
Code
<i class="fa fa-external-link"></i>
or
Code
<i class="fa fa-external-link-square"></i>
There are a few reasons we haven't updated to Font awesome 5.

Re: External link icon

Posted: 23 Sep 2021, 04:47
by janus
There are a few reasons we haven't updated to Font awesome 5.
my client wanted to use an Ethereum icon in the footer - it exists in FA5 (free, but as a brand), but of course because FA4 is from 2017, it doesn't exist there as an icon... we're using a shopping cart icon for now.

do you think a future release will be updated to use FA5 or the forthcoming FA6 ?

Re: External link icon

Posted: 23 Sep 2021, 05:28
by mjau-mjau
janus wrote:my client wanted to use an Ethereum icon in the footer - it exists in FA5 (free, but as a brand), but of course because FA4 is from 2017, it doesn't exist there as an icon... we're using a shopping cart icon for now.

do you think a future release will be updated to use FA5 or the forthcoming FA6 ?
There was actually a couple of reasons why I didn't upgrade font-awesome. Versions > 4 suddenly required javascript and imported much unnecessary junk, and I found out that Google's Material design icons look so much better. However, things have changed again since then with new fontawesome / implementation, so I think I will look into it again for next release.

For now, I workaround for you. I found Ethereum SVG here. Add it to X3 footer like this:
Code
<a href="https://ethereum.org/en/" title="ethereum" data-icon="nope" data-color="#c99d66">
  <svg style="width:36px;height:36px;position: absolute;left: calc(50%);transform: translate(-50%, -50%);top: 50%;" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12,1.75L5.75,12.25L12,16L18.25,12.25L12,1.75M5.75,13.5L12,22.25L18.25,13.5L12,17.25L5.75,13.5Z" />
  </svg>
</a>
Image

Re: External link icon

Posted: 24 Sep 2021, 06:30
by janus
For now, I workaround for you. I found Ethereum SVG here. Add it to X3 footer like this:
many thanks for that.  :star:
Image
as you can see, I tweaked it's size a little and is linking to Opensea as he is offering some of his artwork there as NFT's - ideally, he would have liked to use an Opensea icon, but that doesn't even exist in FA5, so ethereum was the next best option.

he is more than happy with the ethereum icon you provided though, but should the urge arise, i've explained he'd need to use the path data of an opensea svg file (available for download on their site) - I can leave that to him as he's far more familiar with Illustrator than I am!  :slight_smile:

thanks again.