Search…

X3 Photo Gallery Support Forums

Search…
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

External link icon

23 Apr 2021, 04:04

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.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: External link icon

23 Apr 2021, 04:32

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.
 
User avatar
janus
Posts: 15
Joined: 20 Nov 2012, 11:32

Re: External link icon

23 Sep 2021, 04:47

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 ?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: External link icon

23 Sep 2021, 05:28

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
 
User avatar
janus
Posts: 15
Joined: 20 Nov 2012, 11:32

Re: External link icon

24 Sep 2021, 06:30

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.