Utiliser des icônes impressionnantes de police en CSS

J'ai du CSS qui ressemble à 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 utiliser l'icône en CSS comme image de fond. Est-ce possible de faire en supposant que les feuilles de style / polices Font Awesome soient chargées avant mon CSS?

Vous ne pouvez pas utiliser le texte comme image d'arrière-plan, mais vous pouvez utiliser la :beforeou les :afterpseudo-classes pour placer un caractère de texte où vous le souhaitez, sans avoir à ajouter toutes sortes de balises supplémentaires compliquées.

Veillez à définir position:relativevotre wrapper de texte réel 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;
 }

ÉDITER:

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 (semble être 900).

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

Suite à la réponse de Diodeus ci-dessus, vous avez besoin de la font-family: FontAwesomerègle (en supposant que la @font-facerègle pour FontAwesome soit déjà déclarée dans votre CSS). Il s'agit ensuite de savoir quelle valeur de contenu CSS correspond à quelle icône.

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

En fait, même font-awesomeCSS a une stratégie similaire pour définir leurs styles d'icônes. Si vous voulez obtenir rapidement le icon code , vérifiez le non-minified font-awesome.cssfichier et les voici ... chaque police dans sa pureté.

Consolider 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"; 
    }

Vous pouvez essayer cet exemple de classe. 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";
    }

Pour utiliser une police géniale à l'aide de 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 ci-dessous CSS pour appliquer la police sur l'é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 sur la balise / l'élément HTML souhaité.

Pas besoin d'incorporer du contenu dans le CSS. Vous pouvez mettre 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>

Alternativement, si vous utilisez Sass, on peut "é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.
}

#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

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

Obtenez le code d'icône à partir de: https://fontawesome.com/cheatsheet?from=io

Pour cela, il vous suffit d'ajouter un contentattribut etfont-family attribut à l'élément requis via: avant ou: après, le cas échéant.

Par exemple: je voulais joindre une icône de pièce jointe après tout l' aélément à l'intérieur de mon message. Donc, je dois d'abord rechercher si une telle icône existe dans fontawesome. Comme dans le cas où je l'ai trouvé ici , c'est à dire fa fa-paperclip. Ensuite, je cliquais sur l'icône avec le bouton droit de la souris et j'allais dans la ::beforepseudo propriété pour récupérer la contentbalise qu'elle utilise, ce que j'ai trouvé dans mon cas \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 */
    }

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