Use in a web page

1. Searching for icons

We have now integrated the Font Awesome library on our website.
Now it's time to look for the icons we are going to insert.

2. Basic display

We will now enter the code needed to make these icons appear.

The basic syntax is as follows:
Icones "Solid" ("fas") :
Icones "Brand" ("fab") :

3. Basic examples

4. Use of options

In addition to the basic syntax, useful parameters can be added for a situation-specific display.
The syntax with options is as follows:

There are several types of options:

• Size
  fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-5x, fa-7x, fa-10x
  
  
• Vertical alignment
  (Alignement vertical parfait quelque soit la largeur des icônes, "Fixed Width")
  fa-fw
  
  
• Rotation and reversal
  fa-rotate-90, fa-rotate-180, fa-rotate-270, fa-flip-horizontal, fa-flip-vertical, fa-flip-both
  
  
• Animated icons
  fa-spin, fa-pulse

There are other options.
Coloured icons
Simply add the following code inside the < span > tag:
style = "color:#code-couleur-hexa"
You will find full documentation of the options on the dedicated page of the host site.

Colouring of icons

To colour the icons, this is a parameter that you add inside the < span> tag but not inside the "class" tag.
Just add inside the < span > tag the following code:

style = "color:#code-couleur-hexa".

This gives the following complete code:

<span class="fas fa-nom-icône [option 1] [option 2] [option 3]" style = "color:#code-couleur-hexa"></span>

5. Examples with options

Icône	Code
	<span class="fas fa-anchor fa-2x" style="color:slategray"></span>
	<span class="fas fa-lightbulb fa-3x fa-flip-vertical" style="color:#FFFACD"></span>
	<span class="fab fa-ubuntu fa-5x fa-spin" style="color:#DB4E2A"></span>
	<span class="fas fa-fan fa-2x fa-pulse" style="color:LightSalmon"></span>
	<span class="fas fa-palette fa-3x xoopsweb-color"></span> Colouring directly in the class If you have defined colours via classes, you can use them directly, as in the example above. In our personal css file, we have added this line: .xoopsweb-color { color : LightSteelBlue ; }

You now have everything you need to enjoy the Font Awesome library in your web pages!
Enjoy using it!

---