Utilisez les icônes Font Awesome dans CSS

j'ai quelques 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 pas de toute façon d'utiliser L'icône dans CSS comme une image de fond. Est-ce que c'est possible de faire en supposant que la police Awesome stylesheets/fonts est chargée avant mon CSS?

253
demandé sur James Donnelly 2013-02-06 22:47:55

11 réponses

vous ne pouvez pas utiliser le texte comme une image de fond, mais vous pouvez utiliser les classes de pseudo :before ou :after pour placer un caractère de texte où vous le voulez, sans avoir à ajouter toutes sortes de mark-up supplémentaire de désordre.

assurez-vous de mettre position:relative sur votre papier d'emballage pour que le positionnement fonctionne.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "AE";  /* 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;
 }
421
répondu Diodeus - James MacFarlane 2017-08-27 11:13:10

suite à la réponse de Diodeus ci-dessus, vous avez besoin de la règle font-family: FontAwesome (en supposant que vous avez la règle @font-face pour FontAwesome déclaré déjà dans votre CSS). Ensuite, il s'agit de savoir quelle valeur CSS correspond à quelle icône.

je les ai tous énumérés ici: http://astronautweb.co/snippet/font-awesome /

65
répondu Astrotim 2013-02-07 01:20:11

en fait même font-awesome CSS a une stratégie similaire pour définir leurs styles d'icône. Si vous voulez obtenir une prise rapide du icon code , cochez le non-minified font-awesome.css fichier et ils sont là.... chaque police dans sa pureté.

Font-Awesome CSS File screenshot

19
répondu Akash 2016-01-27 23:40:24

la consolidation de tout ce qui précède, ce qui suit est la classe finale qui fonctionne bien

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }
15
répondu Lakshman Pilaka 2015-08-31 07:37:55

dans l'exploitation minière CSS

.adminheader: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";
}
3
répondu Shiv Singh 2015-08-25 10:23:53

il N'est pas nécessaire d'intégrer le contenu dans la CSS. Vous pouvez placer le contenu du badge à l'intérieur de 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
répondu George Hix 2015-07-01 19:29:20

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
répondu Hiura 2018-06-11 07:59:48

pour utiliser font awesome en utilisant css suivre les étapes ci - dessous -

étape 1-Ajouter des polices de FontAwesome dans 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 Utiliser ci - dessous CSS pour appliquer la police sur L'élément de classe de 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 la css sur la balise/l'élément HTML désiré.

1
répondu Ravindra Vairagi 2018-08-03 05:30:14

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
répondu numbtongue 2016-09-27 16:41:52

pour cela, il suffit d'ajouter l'attribut content et l'attribut font-family à l'élément requis via :avant ou :après le cas échéant.

par exemple: je voulais attacher une icône de pièce jointe après tout l'élément a à l'intérieur de mon poteau. Donc, d'abord je dois chercher si une telle icône existe dans fontawesome. Comme dans le cas je l'ai trouvé ici , i.e. fa fa-paperclip . Puis je claquerais droit le icône là, et aller la ::before pseudo propriété pour récupérer le content étiquette qu'il utilise, qui dans mon cas, j'ai trouvé pour être \f0c6 . Alors 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
répondu Animesh Singh 2017-07-06 23:00:54
#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 D'icône de: https://fontawesome.com/cheatsheet?from=io

0
répondu Pervez 2018-08-14 07:44:01