web-dev-qa-db-fra.com

comment inclure les glyphiques dans bootstrap 3

Je n'ai jamais utilisé le framework bootstrap). Je souhaite inclure certains des glyphicons dans bootstrap 3 sur ma page. D'après ce que j'ai compris. devrait être inclus dans un fichier bootstrap.css que j'ai ajouté à ma page. Lorsque j'ai jeté un coup d'œil dans le fichier bootstrap.css mais que je ne vois pas de référence à ces fichiers? .

J'ai remarqué que lorsque j'ai ouvert le dossier dist téléchargé depuis bootstrap 3), il existe un dossier séparé fonts contenant les fichiers nommés:

glyphicons-halflings-regular.eot 
glyphicons-halflings-regular.svg 
glyphicons-halflings-regular.ttf 
glyphicons-halflings-regular.woff

On dirait que c’est là que se trouvent les glyphiques, mais je ne sais pas comment les attacher à mon site? Comment attacher les glyphicons à ma page?

Merci d'avance pour toute aide

Le code ci-dessous montre le fichier bootstrap.css joint:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap example</title>
    <meta name="viewport" content="width=divice-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet" media="screen">
 </head>

et voici la partie du code html indiquant où les glyphicons devraient être:

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>
           Home</a></li>    
          <li><a href="#"><span class="glyphicon glyphicon-star"></span> Top
           Destinations</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span    
            class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>
htmlcsstwitter-bootstrap-3directory
46
moonshineOutlaw

Je pense que votre problème particulier n’est pas de savoir comment utiliser les glyphiques mais de comprendre comment les fichiers Bootstrap fonctionnent ensemble).

Bootstrap nécessite une structure de fichier spécifique pour fonctionner. Je vois dans votre code que vous avez ceci:

<link href="bootstrap.css" rel="stylesheet" media="screen">

Votre Bootstrap.css est chargé à partir du même emplacement que votre page, cela créerait un problème si vous n’ajustiez pas la structure de votre fichier.

Mais d’abord, permettez-moi de vous recommander de configurer votre structure de dossiers de la manière suivante:

/css      <-- Bootstrap.css here
/fonts    <-- Bootstrap fonts here
/img
/js       <-- Bootstrap JavaScript here
index.html

Si vous remarquez, c’est également ainsi que Bootstrap structure ses fichiers lors de son téléchargement Zip.

Vous incluez ensuite votre fichier Bootstrap) comme ceci:

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="./css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="/css/bootstrap.css" rel="stylesheet" media="screen">

En fonction de la structure de votre serveur ou de vos objectifs.

Le premier et le second sont relatifs au répertoire actuel de votre fichier. Le second est juste plus explicite en disant "ici" (./) d’abord, puis css folder (/ css).

La troisième est bonne si vous utilisez un serveur Web, et vous pouvez simplement utiliser la notation relative à la notation racine car le "/" initial sera toujours commencer au dossier racine.

Alors, pourquoi faire ça?

Bootstrap.css a cette ligne spécifique pour Glyphfonts:

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Ce que vous pouvez voir, c'est que les glyphontones sont chargés en montant un répertoire ../, Puis en recherchant un dossier appelé /fonts Et [~ # ~] puis [~ # ~] en chargeant le fichier de police.

L'adresse URL est relative à l'emplacement du fichier CSS. Donc, si votre fichier CSS est au même endroit, comme ceci:

/fonts
Bootstrap.css
index.html

Le fichier CSS va encore plus loin que la recherche d’un dossier /fonts.

Donc, supposons que l'emplacement réel de ces fichiers soit:

C:\www\fonts
C:\www\Boostrap.css
C:\www\index.html

Le fichier CSS serait techniquement à la recherche d'un dossier dans:

C:\fonts

mais votre dossier est actuellement dans:

C:\www\fonts

Alors voyons si ça aide. Vous n'avez rien à faire de spécial pour charger Bootstrap Glyphicons, sauf assurez-vous que votre structure de dossiers est configurée correctement.

Lorsque vous aurez résolu ce problème, votre code HTML devrait simplement être:

<span class="glyphicon glyphicon-comment"></span>

Notez que vous avez besoin de les deux classes. La première classe glyphicon définit les styles de base tandis que glyphicon-comment Définit l'image spécifique.

95
jmbertucci