Search…

X3 Photo Gallery Support Forums

Search…
 
bphotos
Experienced
Topic Author
Posts: 39
Joined: 11 Mar 2013, 08:01

Font Awesome

02 May 2018, 23:31

Hi all!
Maybe some one of you has a problem with icon from Font Awesome?
Here I found information
https://demo.photo.gallery/examples/features/sample/
## Font Icons
<div class="small-block-grid-5 text-center">
<li class='fa fa-camera-retro fa-4x'></li>
<li class='fa fa-heart fa-4x' style='color:tomato;'></li>
<li class='fa fa-tree fa-4x' style='color:yellowgreen;' ></v>
<li class='fa fa-star fa-4x'  style='color:gold;'></li>
<li class='fa fa-tripadvisor fa-4x color-primary' style='color:#589442;'></li>
</div>
<pre data-lang="html"><code><i class='fa fa-rocket'></i></code></pre>
Easily add icons into your page designs with the included [font={defaultattr}](http://fortawesome.github.io/Font-Awesome/icons/). Font icons are vector-based, so they look good at any size, and can be styled with CSS. 

Some icons work, some doesn't
My page for experiements
http://belovephotos.com/galleries/sample/
part of Property Highlights


 [/font]
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Font Awesome

03 May 2018, 00:21

X3 uses Font Awesome 4.7. You can find references to available icons here:
https://fontawesome.com/v4.7.0/icons/

I think perhaps our sample page links to the wrong page after they released Font Awesome 5. I see you are using some references to Font Awesome 5, with "fas", "far" and "fab". Font-awesome 4 uses only "fa".

I think we will be upgrading X3 to use Font Awesome 5 very soon, but there are a couple of things:
  • Upgrading to Font awesome 5 is not backwards compatible, because it uses classes "fas", "far" and "fab" (three different styles) to assign icons, whereas font-awesome 4 uses only "fa". X3 websites with custom icons in pages will therefore no longer render properly. There is possibly a fix for this and/or we can make the font-awesome version a choice in settings.
  • Font awesome 5 has 3 different styles (solid, regular, light). We won't be loading all 3 styles into the X3 (a lot of unnecessary loading), but likely you will be able to choose the style from X3 settings.
  • Many icons in Font awesome 5 are "Pro" only. Not really a problem.
  • Font awesome 5 uses new technology SVG instead of "font icon", and needs to be implemented slightly differently.