web-dev-qa-db-ja.com

bootstrap 3にグリフィコンを含める方法

以前にbootstrapフレームワークを使用したことはありません。私のページのbootstrap 3にグリフィコンの一部を含めたいです。私が理解したことから、それらは私のページに追加したbootstrap.cssファイルに含まれるべきです。しかし、bootstrap.cssファイルを調べたときに、それらへの参照が表示されていませんか？大きなファイルですが、何かを見落としているかもしれません。

bootstrap 3からダウンロードしたdistフォルダーを開くと、次の名前のファイルを含む別のフォルダーfontsがあることに気付きました。

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

これはグリフィコンがある場所のようですが、グリフィコンを自分のサイトに添付する方法がわかりませんか？グリフィコンをページに添付するにはどうすればよいですか？

事前に助けてくれてありがとう

以下のコードは、添付のbootstrap.cssファイルを示しています。

<!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>

グリフィコンの場所を示すhtmlコードの一部は次のとおりです。

      <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

あなたの特定の問題は、グリフィコンの使い方ではなく、Bootstrapファイルがどのように連携するかを理解することだと思います。

ブートストラップが機能するには特定のファイル構造が必要です。あなたのコードからあなたはこれを持っていることがわかります：

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

Bootstrap.cssはページと同じ場所からロードされているため、ファイル構造を調整しないと問題が発生します。

しかし、まず、次のようにフォルダー構造を設定することをお勧めします。

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

気がついたなら、これはBootstrapがダウンロードZipでファイルを構成する方法でもあります。

次に、次のようにBootstrapファイルを含めます。

<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">

サーバー構造または目的に応じて。

最初と2番目は、ファイルの現在のディレクトリに相対的です。 2番目は、「here」（./）を最初に、次にcssフォルダー（/ css）を指定することで、より明確になります。

3番目の方法は、Webサーバーを実行している場合に適しています。先頭の「/」は常にルートフォルダーから開始されるため、ルート表記法を基準にして使用できます。

それで、なぜこれをするのですか？

Bootstrap.cssには、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');
}

表示できるのは、1つのディレクトリ../に移動し、/fontsと呼ばれるフォルダを探してをロードし、をロードすることでGlyphfontsがロードされることです。フォントファイル。

URLアドレスは、CSSファイルの場所に関連しています。したがって、CSSファイルが次のような同じ場所にある場合：

/fonts
Bootstrap.css
index.html

CSSファイルは、/fontsフォルダーを探すよりも1レベル深くなっています。

したがって、これらのファイルの実際の場所は次のとおりです。

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

CSSファイルは、技術的には次の場所にあるフォルダーを探します。

C:\fonts

しかし、あなたのフォルダは実際には：

C:\www\fonts

したがって、それが役立つかどうかを確認してください。フォルダー構造が適切に設定されていることを確認する以外は、Bootstrap Glyphiconsを読み込むために「特別な」操作を行う必要はありません。

修正したら、HTMLは次のようになります。

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

注：bothクラスが必要です。最初のクラスglyphiconは基本的なスタイルを設定し、glyphicon-commentは特定の画像を設定します。

95
jmbertucci