Les icônes Font-Awesome ne sont pas rendues via BoostrapCDN

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

  •  20-12-2019
  •  | 
  •  

Question

J'essaie d'utiliser les polices d'icônes Font-Awesome via le lien BootstrapCDN dont je suis presque sûr d'avoir la dernière version :

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

J'ai mis ce lien dans le <head> une partie de mon fichier html et j'essaie de le faire fonctionner avec ce simple code html 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>

Cependant, ce n'est pas un rendu.J'ai essayé ce code dans les dernières versions de FireFox (27), Safari(7) et Chrome(33).J'ai vérifié que le fa la classe est sur chacune des icônes que j'essaie d'appeler et aussi que le fa- le préfixe est utilisé par opposition à l'ancien icon- préfixe.J'ai vérifié mon implémentation du code avec cette vidéo http://headwaythemes.com/using-font-awesome-with-headway/ (bien que destiné à un thème WordPress, en principe, le code devrait fonctionner de la même manière) et j'ai regardé le débordement de pile mais les questions précédentes comme Fontawesome ne se charge pas ne m'a apporté aucune aide pour résoudre mon problème.

Je n'ai pas installé le fichier fontawesome.otf mais ce n'est sûrement pas le cas si je peux voir les glyphes lors de la visite http://fortawesome.github.io.
Dois-je simplement télécharger et héberger les fichiers Font-Awesome avec l'intégralité de mon futur site Web afin de ne pas avoir à me soucier également de la mise à jour du lien BoostrapCDN ?- Même si je prévois d'utiliser seulement quelques icônes ?

Était-ce utile?

La solution

La raison pour laquelle il ne se charge pas est que l'URI commence par "//".Cela signifie qu'il s'agit d'un chemin relatif de protocole, ce qui signifie qu'il utilisera le protocole utilisé par cette page.Si vous ouvrez votre code HTML localement, votre navigateur utilisera déposer comme protocole, essayant ainsi d'accéder au CSS font-awesome avec "file://".Si vous accédez à votre code HTML à l'aide d'un serveur Web http local ou distant, vous accéderez à la page en utilisant le http protocole, accédant ainsi au CSS avec "http://".

Solution:

  1. Modifiez le chemin du CSS ou imitez-le sur votre machine locale.
  2. Exécutez un serveur http local ou distant et accédez à la page.

Pour plus d'informations:URI commençant par deux barres obliques...comment se comportent-ils ?

Autres conseils

Un moyen tellement plus simple de gérer cela - ajoutez simplement « http : » devant la ligne cdn, et cela fonctionnera sur votre machine locale, c'est-à-direcomme ça:

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

Ta-daa !

Ce que Pulkit a répondu est tout à fait exact.Juste pour ajouter, si vous souhaitez créer un serveur local rapide, allez simplement dans le répertoire des pages html et css, puis allez dans le terminal et tapez -

$python -m SimpleHTTPServer

Ensuite, allez dans votre navigateur et passez à 127.0.0.1:8000 s'il n'apparaît pas, essayez de changer la page d'accueil de votre site Web en index.html

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top