Use ícones impressionantes de fontes em CSS


305

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?


Glifos de fontes não podem ser usados ​​como plano de fundo. SVGs, no entanto, pode
cimmanon

@cimmanon você se importaria de explicar como isso poderia se aplicar a font-incrível
BonsaiOak

@BonsaiOak O que há para explicar que ainda não foi explicado pela resposta selecionada? Se você tiver uma pergunta que não foi respondida por essa (ou qualquer outra pergunta no SO), faça uma nova pergunta.
Cimmanon

@ cimmanon desculpe pela falta de clareza. Você parecia sugerir que era possível usar um ícone do arquivo de fonte font-awesome.svg como plano de fundo. No entanto, você nunca disse isso explicitamente, então não tenho certeza.
BonsaiOak

1
@BonsaiOak Sim, você pode usar um SVG como imagem de fundo, da mesma maneira que usaria qualquer outra imagem. No entanto, não observei o SVG FontAwesome para verificar se ele pode ser usado dessa maneira.
Cimmanon

Respostas:


489

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).


63
O texto-equivalente de cada ícone está lá fortawesome.github.io/Font-Awesome/cheatsheet
Matthieu

61
Você terá que remover o & # x desde o início e; do fim. O nome da família da fonte é FontAwesome
Matthieu

5
@ David, é apenas texto, use font-size.
JCM

6
para FontAwesome v5 Você precisa usar .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
Digvijayad

5
Apenas observe que isso não parece funcionar com elementos de entrada (como um botão de envio), pois eles não parecem suportar: before ou: after.
Mir

70

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/


1
trabalhou depois que removi a posição: absoluto; na .element: antes, agora eu posso decorar meus links com ícones impressionantes da fonte, mas manter a minha fonte personalizada da ligação
jethroo

ótima lista de valores de conteúdo!
Anthony

1
Como observado na resposta por @staabm, FontAwesome mantém uma lista oficial dos códigos para cada glifo: fontawesome.io/cheatsheet
alxndr

24

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.

Captura de tela do Font-Awesome CSS File


22

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

melhor resposta, pois você pode remover uma tag <i> anterior antes do texto desejado com o ícone e substituí-la. E o mesmo espaço é dado.
22615 Andygoestohollywood #

7

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

6

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.


2

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>

8
"Não é necessário incorporar conteúdo no CSS". Bem, em algumas situações é necessário.
Stéphane Bruckert

2
Se você não se importa com o aprimoramento progressivo, tudo bem, mas você deve manter seu estilo dentro de um arquivo css sempre que possível.
Adam Carr

2

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


0

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 */
    }

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.