Usar ícones impressionantes do tipo de letra no CSS
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
gostaria de substituir a imagem por um ícone de Font Awesome.
Eu não vejo de qualquer maneira para usar o ícone em CSS como uma imagem de fundo. É possível fazer isto assumindo que as folhas de estilo/tipos de letra incríveis são carregadas antes do meu CSS?
11 answers
Não pode usar o texto como uma imagem de fundo, mas pode usar as pseudo-classes :before
ou :after
para colocar um carácter de texto onde o desejar, sem ter de adicionar todos os tipos de marcas extra confusas.
Não se esqueça de colocar position:relative
na sua embalagem de texto real para o posicionamento funcionar.
.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;
}
Além da resposta do Diodeu acima, você precisa da regra {[[0]} (assumindo que você tem a regra @font-face
Para FontAwesome declarada já no seu CSS). Então é uma questão de saber qual o valor do conteúdo CSS corresponde a qual ícone.
Listei-os todos aqui: http://astronautweb.co/snippet/font-awesome/
Na verdade até font-awesome
o CSS tem uma estratégia semelhante para definir os seus estilos de ícones. Se você quiser obter um rápido controle do icon
Código , verifique o non-minified font-awesome.css
file e lá estão eles....Cada tipo de letra na sua pureza.
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "\f0a9";
}
Na minha a trabalhar este 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";
}
Não é necessário inserir o conteúdo no CSS. Você pode colocar o conteúdo do crachá dentro do elemento fa, em seguida, ajustar o crachá css. 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>
Em alternativa, se usar o SAS, pode-se" extender " os ícones FA para os Mostrar:
.mytextwithicon:before {
@extend .fas, .fa-angle-double-right;
@extend .mr-2; // using bootstrap to add a small gap
// between the icon and the text.
}
Para usar o 'font awesome' usando o css, siga os passos abaixo -
Passo 1-Adicionar fontes de FontAwesome no 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');
}
Passo-2 Usar abaixo do css para aplicar o tipo de letra no elemento 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 marca/elemento HTML desejado.
Utilize o seguinte programa Python através da linha de comandos para criar imagens png a partir de ícones de tipo de letra:
Para isso, basta adicionar content
atributo e font-family
atributo ao elemento requerido via: antes ou: depois, sempre que aplicável.
Por exemplo: eu queria anexar um ícone do Anexo Depois de todo o elemento a
dentro do meu post. Então, Primeiro preciso procurar se esse ícone existe em fontawesome. Como no caso em que o encontrei aqui, isto éfa fa-paperclip
. Então eu iria carregar com o botão direito no ícone ali, e iria a pseudo propriedade ::before
para obter a marca content
que está a usar, que, no meu caso, descobri ser. 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 */
}
#content h2:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Ligação De Exemplo: https://codepen.io/bungeedesign/pen/XqeLQg
Obter o Código dos ícones de: https://fontawesome.com/cheatsheet?from=io