Comment ajouter des icônes Font Awesome sur Squarespace ?

Font Awesome vous permet d'ajouter des icônes vectorisées, pouvant être instantément customisées. Vous pouvez en modifier: la taille, la couleur, l'ombre, et tout ce qui peut être fait avec du CSS.

Ce n'est pas compliqué, seulement ce n'est pas une fonctionnalité native de Squarespace. Du coup, la mise en place peut paraître un peu confuse. Pour vous simplifier le travail, voici la marche à suivre:

 

Code CSS

Copier/coller simplement le code ci-dessous dans la section Custom CSS de l'onglet Design.

 

.icon-title {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 30px;
}
.icon-p {
  text-align: center;
}
.icon {
  text-align: center;
}
 

Injection de code dans le header

Copier/coller simplement le code ci-dessous dans Advanced settings > Code injection > Header Section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 

Bloc de code  pour l'icône

Copier/coller le code ci-dessous dans un Code block sur votre page.

<div class="icon">
  <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
</div>

<h2 class="icon-title">
  Web Design
</h2>

<p class="icon-p">
  The following text is placeholder known as lorem ipsum, which is scrambled Latin used by designers to mimic real copy.
</p>