Support de formation

ICONE Font Awesome

https://expanding.jimdo.com/hacks/using-font-awesome-icon-font/

Ajoutez ce qui suit à la tête de votre site Web :

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"/>

Choisissez maintenant l'icône (s) que vous souhaitez utiliser sur votre site Web en regardant les options sur la page

http://fontawesome.io/icons/

Pour que le code fonctionne dans Jimdo, vous devez ajouter un espace insécable dans le code. Cet exemple montre comment faire fonctionner le même code dans Jimdo.

Souvenez-vous que c'est aussi une police, vous pouvez donc utiliser CSS pour changer la taille ou la couleur comme dans cet exemple:

<i class="fa fa-file-pdf-o" aria-hidden="true" style="color:#6BBFDB; font-size:48px;">&nbsp;</i>

<p><i class="fas fa-phone" style="display: block; height: 100%; width: 100%; margin: auto; text-align: center; color: #6bbfdb; font-size: 48px;"> <span style="font-size: 38px;font-family: "arial";"><span style="color: #000000;" arial="">05 61 81 80 54</span> </span></i></p>

Exemple icone centré :

<i class="far fa-file-pdf" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i>

<table align="" class="mceEditable" width="100%" height="100%" cellspacing="0" cellpadding="3" border="0">

<tbody>

<tr>

<td><i class="fab fa-facebook-f" style="display: block; height: 100%; width: 100%; margin: auto; text-align: center; color: #ff9eca; font-size: 28px;"> </i></td>

<td><i class="fab fa-instagram" style="display: block; height: 100%; width: 100%; margin: auto; text-align: center; color: #ff9eca; font-size: 28px;"> </i></td>

<td><i class="fab fa-pinterest-p" style="display: block; height: 100%; width: 100%; margin: auto; text-align: center; color: #ff9eca; font-size: 28px;"> </i></td>

</tr>

</tbody>

</table>

Exemple :

<i class="fas fa-mobile-alt" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i>
<i class="fas fa-home fa-fw" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i>
<i class="fas fa-info fa-fw" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i>
<i class="fas fa-book fa-fw" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i>
<i class="fas fa-pencil-alt fa-fw" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i>
<i class="fas fa-cog fa-fw" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i>

Exemple :

<div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
<div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
<div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
<div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
<div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>

<table align="" class="mceEditable" width="100%" height="100%" cellspacing="0" cellpadding="3" border="0">

<tbody>

<tr>

<td><i class="fas fa-mobile-alt" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i></td>

<td><i class="fas fa-pencil-alt fa-fw" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i></td>

<td><i class="fas fa-home fa-fw" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i></td>

<td><i class="fas fa-info fa-fw" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i></td>

<td><i class="fas fa-book fa-fw" aria-hidden="true" style="display: block;height: 100%;width: 100%;margin: auto;text-align: center;color:#6BBFDB; font-size:48px;"> </i></td>

</tr>

</tbody>

</table>

Autres astuces :

https://fontawesome.com/how-to-use/web-fonts-with-css

https://fontawesome.com/how-to-use/svg-with-js