Ícones Font-Awesome não são renderizados por meio do BoostrapCDN

StackOverflow https://stackoverflow.com//questions/22002238

  •  20-12-2019
  •  | 
  •  

Pergunta

Estou tentando usar fontes de ícones Font-Awesome por meio do link BootstrapCDN, do qual tenho certeza de que tenho a versão mais recente:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

coloquei esse link no <head> parte do meu arquivo html e estou tentando fazê-lo funcionar com este código html simples de:

<!DOCTYPE html>
<html>
<head>
    <title>Font-Awesome Icons</title> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>

No entanto, não é renderização.Eu tentei esse código nas versões mais recentes do FireFox (27), Safari(7) e Chrome(33).Eu verifiquei que o fa class está em cada um dos ícones que estou tentando acessar e também que o fa- prefixo está sendo usado em oposição ao antigo icon- prefixo.Eu verifiquei minha implementação do código com este vídeo http://headwaythemes.com/using-font-awesome-with-headway/ (embora destinado a um tema WordPress, em princípio o código deve funcionar da mesma forma) e procurei no estouro de pilha, mas questões anteriores como Fontawesome não carrega não me deram nenhuma ajuda para resolver meu problema.

Não tenho o fontawesome.otf instalado, mas certamente não é assim se consigo ver os glifos ao visitar http://fortawesome.github.io.
Devo apenas baixar e hospedar os arquivos incríveis de fontes junto com todo o meu futuro site para não precisar me preocupar em atualizar o link do BoostrapCDN também?- Mesmo que eu planeje usar apenas alguns ícones?

Foi útil?

Solução

O motivo pelo qual não está carregando é porque o URI está começando com "//".Isso significa que é um caminho relativo ao protocolo, o que significa que usará qualquer protocolo que a página esteja usando.Se você abrir seu html localmente, seu navegador usará arquivo como o protocolo, tentando assim acessar o css incrível da fonte com "file: //".Se você acessar seu html usando um servidor web http local ou remoto, você acessará a página usando o http protocolo, acessando assim o css com "http://".

Solução:

  1. Altere o caminho do css ou imite-o na sua máquina local.
  2. Execute um servidor http local ou remoto e acesse a página.

Para mais informações:URI começando com duas barras...como eles se comportam?

Outras dicas

Uma maneira mais fácil de lidar com isso - basta adicionar 'http:' na frente da linha CDN e ele funcionará em sua máquina local, ou seja,assim:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Ta-daa!

O que Pulkit respondeu está absolutamente correto.Só para acrescentar, se você deseja criar um servidor local rápido, basta ir ao diretório das páginas html e css, e depois ir ao terminal e digitar -

$python -m SimpleHTTPServer

Em seguida, vá para o seu navegador e vá para 127.0.0.1:8000 Se ele não aparecer, tente alterar a página inicial do seu site para index.html

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top