Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

herris

não está aparecendo alguns FONTS ICONS

Por , em Desenvolvimento frontend

Recommended Posts

L. Henrique    179

L. Henrique
Postado

Se essa tag <i> estiver dentro de alguma outra com font-family declarado, ela acaba recebendo e anulando o do font-awesome. Um exemplo:

<p>Whatsapp <i class="fa fa-whatsapp"></i></p>

SE a tag <p> receber um font-family:

p {
   font-family: Arial;
   font-size: 1em;
}

Ele vai considerar que <i> também é Arial, anulando o font-family do Font Awesome. Veja se esse é o seu problema.

 

/* Override */

Esse método é quando você tem um CSS dizendo que h1 = #FFF e você cria outro estilo com h1 sendo #000. Você está sobrescrevendo o estilo anterior. Dando um "override".

 

/* CDN */

Saindo das siglas "Content Delivery Network". Indo do básico do básico, o que ele faz é ler os arquivos de um servidor, salvando parte dele no seu computador e deixando a outra metade em transição e no servidor. Quando você acessa o mesmo site novamente ou site que contenham o mesmo CDN (FontAwesome ou Bootstrap), ele já está semi-salvo em seu computador, fazendo com que a abertura da página seja mais rápida.

Compartilhar este post

Link para o post
Compartilhar em outros sites

herris    0

herris
Postado

Bom dia,

 

Dei uma olhada no que voce disse mas não é isto que esta acontecendo, pois se eu uso outros FONT ICONS, tipo <i class="fa fa-phone">, ele funciona, somente no caso de alguns, como o whatsapp, é que dá erro. Detalhe, já havia ocorrido antes com outros FONT ICONS

 

Obrigado pela explicação de override e CDN

Compartilhar este post

Link para o post
Compartilhar em outros sites

herris    0

herris
Postado

senhores,

 

consegui fazer funcionar utilizando este CSS (mais as fontes):

 

<!DOCTYPE html>
<html>
<head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta charset="UTF-8">
<style>
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?51817635');
src: url('./font/fontello.eot?51817635#iefix') format('embedded-opentype'),
url('./font/fontello.woff?51817635') format('woff'),
url('./font/fontello.ttf?51817635') format('truetype'),
url('./font/fontello.svg?51817635#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.demo-icon
{
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* You can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
</style>
</head>
<body>
<i class="demo-icon icon-whatsapp"></i>
</body>
</html>
obrigado pela força

Compartilhar este post

Link para o post
Compartilhar em outros sites

fabiomoreira.rp    0

fabiomoreira.rp
Postado

Eu estava com o mesmo problema, quando eu usei 

font-family: 'Lato', sans-serif;

para todo o projeto, parou de funcionar os ícones, então logo abaixo eu usei a classe dos ícones para resolver o problema.

.fa:before {font-family: FontAwesome !important;} 
.icofont:before{font-family: 'IcoFont' !important;}

Assim resolveu os meus problemas com os ícones.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rodrigocezar    0

rodrigocezar
Postado

Boa tarde, tenho tido esse mesmo tipo de problema em todos os templates que baixo, ai acabo removendo o codigo do icone e colocando uma imagem para resolver o problema, mas eu gostaria de aprender sobre como resolver esse "problema". Eu li todas as coisas que publicaram aqui mas não consegui identificar o problema no meu template.

Vocês poderiam me auxiliar?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito