Use ícones impressionantes de fontes em CSS

Eu tenho algum CSS que se parece com isso:

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

Gostaria de substituir a imagem por um ícone do Font Awesome .

Não vejo como usar o ícone em CSS como imagem de fundo. Isso é possível assumindo que as folhas de estilo / fontes do Font Awesome sejam carregadas antes do meu CSS?

Você não pode usar o texto como imagem de plano de fundo, mas pode usar as classes :beforeou :afterpseudo-classes para colocar um caractere de texto onde desejar, sem precisar adicionar todos os tipos de marcas extras bagunçadas.

Certifique-se de definir position:relativeno seu invólucro de texto real para que o posicionamento funcione.

.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;
 }

EDITAR:

O Font Awesome v5 usa outros nomes de fontes além das versões anteriores:

• Para o FontAwesome v5, versão gratuita, use: font-family: "Font Awesome 5 Free"
• Para FontAwesome v5, Pro Version, use: font-family: "Font Awesome 5 Pro"

Observe que você também deve definir a mesma propriedade de peso da fonte (parece ser 900).

Outra maneira de encontrar o nome da fonte é clicar com o botão direito do mouse em um ícone impressionante de fonte de amostra na sua página e obter o nome da fonte (da mesma forma que o código do ícone utf-8 pode ser encontrado, mas observe que você pode encontrá-lo :before).

Além da resposta do Diodeus acima, você precisa da font-family: FontAwesomeregra (assumindo que a @font-faceregra para FontAwesome já esteja declarada em seu CSS). É uma questão de saber qual valor de conteúdo CSS corresponde a qual ícone.

Eu listei todos eles aqui: http://astronautweb.co/snippet/font-awesome/

Na verdade, até o font-awesomeCSS tem uma estratégia semelhante para definir seus estilos de ícone. Se você deseja obter um icon código rápido , verifique o non-minified font-awesome.cssarquivo e lá estão eles ... cada fonte em sua pureza.

Consolidando tudo acima, a seguir é a classe final que funciona bem

   .faArrowIcon {
        position:relative;
    }

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

Você pode tentar esta classe de exemplo. e encontre o conteúdo do ícone aqui: 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";
    }

Para usar a fonte awesome using css, siga as etapas abaixo -

passo 1 - Adicione fontes do FontAwesome em 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');
}

Etapa - 2 Use abaixo do css para aplicar a fonte no elemento de classe do 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;
}

E, finalmente, use a classe " sorting_asc " para aplicar o css na tag / elemento HTML desejado.

Não é necessário incorporar conteúdo no CSS. Você pode colocar o conteúdo do crachá dentro do elemento fa e ajustar o css do crachá. 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>

Como alternativa, se estiver usando o Sass, é possível "estender" os ícones de FA para exibi-los:

.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;
}

Exemplo de link: https://codepen.io/bungeedesign/pen/XqeLQg

Obtenha o código do ícone em: https://fontawesome.com/cheatsheet?from=io

Para isso, basta adicionar contentatributo e font-familyatributo ao elemento necessário via: before ou: after, onde aplicável.

Por exemplo: eu queria anexar um ícone de anexo depois de todo o aelemento dentro da minha postagem. Então, primeiro eu preciso procurar se esse ícone existe em fontawesome. Como no caso, eu encontrei aqui , ie fa fa-paperclip. Então eu clicava com o botão direito do mouse no ícone e ::beforeacessava a propriedade pseudo para buscar a contenttag que está usando, o que, no meu caso, achei que era \f0c6. Então eu usaria isso no meu css assim:

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

Use o seguinte programa Python via linha de comando para criar imagens png a partir dos ícones Font-Awesome:

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