web-dev-qa-db-fra.com

Utiliser les icônes Font Awesome en CSS

J'ai des CSS qui ressemblent à ceci:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

Je voudrais remplacer l'image par une icône de Font Awesome .

Je ne vois quand même pas utiliser l'icône en CSS comme image de fond. Est-ce possible de faire en supposant que les feuilles de style Font Awesome sont chargées avant mon CSS?

cssfont-awesome
282
L84

Vous ne pouvez pas utiliser du texte comme image d'arrière-plan, mais vous pouvez utiliser les pseudo-classes :before ou :after pour placer un caractère de texte à l'endroit souhaité, sans devoir ajouter toutes sortes de balises malpropres. up.

Assurez-vous de définir position:relative sur votre wrapper de texte actuel pour que le positionnement fonctionne.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

EDIT:

Font Awesome v5 utilise d'autres noms de police que les anciennes versions:

  • Pour FontAwesome v5, version gratuite, utilisez: font-family: "Font Awesome 5 Free"
  • Pour FontAwesome v5, version Pro, utilisez: font-family: "Font Awesome 5 Pro"

Notez que vous devez également définir la même propriété font-weight (qui semble être 900).

Une autre façon de trouver le nom de la police consiste à cliquer avec le bouton droit de la souris sur un exemple d’icône géniale de police sur votre page et d’obtenir le nom de la police (de la même manière que le code de l’icône utf-8 peut être trouvé, mais notez que vous pouvez le trouver sur :before).

464
Diodeus - James MacFarlane

En complément de la réponse de Diodeus ci-dessus, vous avez besoin de la règle font-family: FontAwesome (si vous avez déjà déclaré la règle @font-face pour FontAwesome dans votre CSS). Ensuite, il suffit de savoir quelle valeur de contenu CSS correspond à quelle icône.

Je les ai tous listés ici: http://astronautweb.co/snippet/font-awesome/

67
Astrotim

En fait, même _font-awesome_ CSS applique une stratégie similaire pour définir le style de ses icônes. Si vous voulez obtenir rapidement le code icon, vérifiez le fichier non-minified font-awesome.css et les voilà .... chaque police dans sa pureté.

Font-Awesome CSS File screenshot

20
Akash

En consolidant tout ce qui précède, voici le dernier cours qui fonctionne bien

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }
19
Lakshman Pilaka

Vous pouvez essayer cette classe d'exemple. et trouvez le contenu des icônes ici: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }
5
Shiv Singh

Pour utiliser font awesome avec css, suivez les étapes ci-dessous -

étape 1 - Ajouter des polices de FontAwesome en CSS

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

Étape 2 Utilisez css ci-dessous pour appliquer la police sur un élément de classe HTML

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

Et enfin, utilisez la classe "sorting_asc" pour appliquer le css à l'élément/balise HTML souhaité.

2
Ravindra Vairagi

Pas besoin d'intégrer du contenu dans le CSS. Vous pouvez insérer le contenu du badge dans l'élément fa, puis ajuster le css du badge. http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>
2
George Hix
#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

Exemple de lien: https://codepen.io/bungeedesign/pen/XqeLQg

Obtenir le code de l’icône auprès de: https://fontawesome.com/cheatsheet?from=io

1
Pervez

Alternativement, si vous utilisez Sass, vous pouvez "étendre" les icônes FA pour les afficher:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}
1
Hiura

Pour cela, il vous suffit d'ajouter les attributs content et font-family à l'élément requis via: before ou: after, le cas échéant.

Par exemple: je souhaitais attacher une icône de pièce jointe après à l’ensemble de l’élément a de mon message. Je dois donc commencer par rechercher si une telle icône existe dans fontawesome. Comme dans le cas je l'ai trouvé ici , c'est-à-dire fa fa-Paperclip. Ensuite, je clique avec le bouton droit de la souris sur l'icône puis j'utilise la pseudo-propriété ::before pour extraire la balise content utilisée, que j'ai trouvée \f0c6. Ensuite, je l’utiliserais dans mon css comme ceci:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }
0
Animesh Singh

Utilisez le programme Python suivant via la ligne de commande pour créer des images png à partir des icônes Font-Awesome:

https://github.com/Pythonity/font-awesome-to-png

0
boateng