Bootstrap glyphicons font icon_javascript スキルの詳細な説明-jsチュートリアル-php.cn

Bootstrap glyphicons font icon_javascript スキルの詳細な説明

WBOY

リリース： 2016-05-16 15:22:12

オリジナル

1065 人が閲覧しました

この章では、フォントアイコン (グリフィコン) について説明し、いくつかの例を通してその使用法を理解します。 Bootstrap には、200 を超えるフォント形式のグリフがバンドルされています。まず、フォントアイコンとは何なのかを理解しましょう。

まず、フォントアイコンとは何かをご紹介します:

Font Icon は、Web プロジェクトで使用されるアイコンフォントです。フォントアイコンは、ダウンロードしたブートストラップのフォントフォルダーにあります。

.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 -webkit-font-smoothing: antialiased;
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -moz-osx-font-smoothing: grayscale;
}

ログイン後にコピー

.glyphicon クラスは、上から 1px の相対位置オフセットを宣言し、インラインブロックとしてレンダリングし、フォントを宣言し、通常どおり font-style と font-weight を指定し、行の高さを 1 に設定します。それ以外の場合は、ブラウザ間の一貫性を保つために、-webkit-font-smoothing: antialiased および -moz-osx-font-smoothing: greyscale を使用します。

-webkit-font-smoothing と -moz-osx-font-smoothing について:

-webkit-font-smoothing 属性。この属性を使用すると、ページ上のフォントがアンチエイリアス化され、フォントがより鮮明で快適に見えるようになります。

なし以来サブピクセルアンチエイリアス ------デフォルト値
反物質。自動
継承 ------ 親要素
を継承しますイニシャル
-moz-osx-font-smoothing 属性。-osx- は、これが特定のオペレーティングシステム用に Mozilla によって開始されたまれな機能拡張であることを示します。ドキュメントが不足しているため、現在知られている値は次のとおりです。
グレースケール — アンチエイリアシングは非常に優れています
auto —---デフォルト値

継承 ------ 継承

Bootstrap には 200 個のフォントアイコンが用意されており、各アイコンはクラスに対応しています。これを使用する場合は、グリフィコンと対応するクラスを含めるだけです。

使用法:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset = "utf-8"> 
  <title>demo</title> 
  <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> 
  <style type="text/css"> 
    body{padding: 20px;} 
  </style> 
</head> 
<body> 
  <span class = "glyphicon glyphicon-lock"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:30px;"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:60px;"></span>   
</body> 
</html>

ログイン後にコピー

ボタンで使用:

効果:

<body> 
  <button class="btn btn-default"> 
    <span class = "glyphicon glyphicon-home"></span> 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-info"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-lg"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-sm"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
</body>

ログイン後にコピー

カスタマイズされたフォントアイコン

前の例では、フォントアイコンのサイズと色を実際にカスタマイズしました。これについては、ここでさらに説明します。

フォントのサイズまたはボタンのサイズを変更することで、フォントアイコンのサイズを変更できます。

色を設定することで、次のようにフォントアイコンの色を変更できます。

効果:

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success" style="color:#FF0000;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home" style="color:#FF0000;"></span> Home 
  </button> 
</body>

ログイン後にコピー

フォントアイコンの色は、その親要素またはスパン自体の色を変更することで変更できることがわかります。

テキストシャドウを適用する

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg" style="text-shadow: black 3px 2px 3px;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg"> 
    <span class = "glyphicon glyphicon-home" style="text-shadow: black 3px 2px 3px;"></span> Home 
  </button> 
</body>

ログイン後にコピー

詳細については、フォントアイコンとブートストラップの公式ドキュメントを参照してください。