Ikon fon Bootstrap


Bab ini akan menerangkan ikon fon (Glyphicons) dan memahami penggunaannya melalui beberapa contoh. Bootstrap disertakan dengan glyph dalam lebih 200 format fon. Mula-mula, mari kita fahami apa itu ikon fon.

Apakah itu ikon fon?

Ikon Fon ialah fon ikon yang digunakan dalam projek web. Walaupun, Glyphicons Halflings memerlukan lesen komersial, anda boleh menggunakan ikon ini secara percuma melalui Bootstrap berasaskan projek.

Untuk menyatakan rasa terima kasih kami kepada pengarang ikon, kami berharap anda akan memasukkan pautan ke laman web GLYPHICONS apabila menggunakannya.

Dapatkan ikon fon

Kami telah memuat turun versi Bootstrap 3.x dalam bab Pemasangan Persekitaran dan memahami struktur direktorinya. Ikon fon boleh ditemui dalam folder fon, yang mengandungi fail berikut:

  • glyphicons-halflings-regular.eot

  • glyphicons-halflings-regular.svg

  • glyphicons-halflings-regular.ttf

  • glyphicons-halflings-regular.woff

Peraturan CSS yang berkaitan ditulis dalam bootstrap.css dan bootstrap-min dalam folder css dalam folder dist 🎜> fail.

Senarai Ikon Fon

Klik di sini untuk melihat senarai ikon fon yang tersedia.

Penjelasan Peraturan CSS

Peraturan CSS berikut membentuk kelas glyphicon.

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: format url('../fonts/glyphicons-halflings-regular.eot?#iefix')('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');
}

.glyphicon {
kedudukan: relatif;
atas: 1px;
paparan: inline-block;
font-family: 'Glyphicons Halfings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz- osx-font-smoothing: skala kelabu;
}

Jadi peraturan muka fon sebenarnya mengisytiharkan keluarga fon dan kedudukan tempat glifikon ditemui. Kelas

.glyphicon mengisytiharkan kedudukan relatif mengimbangi 1px dari atas, menjadikannya sebagai blok sebaris, mengisytiharkan fon, menentukan gaya fon dan berat fon seperti biasa dan menetapkan ketinggian garisan sebagai 1. Jika tidak, gunakan -webkit-font-smoothing: antialiased dan -moz-osx-font-smoothing: grayscale; untuk konsistensi merentas penyemak imbas.

Kemudian, di sini

.glyphicon:empty {
lebar: 1em;
}

ialah glyphicon kosong.

Terdapat 200 kelas, setiap kelas adalah untuk ikon. Format biasa kelas ini adalah seperti berikut:

.glyphicon-keyword:before {
kandungan: "hexvalue";
}

Contohnya , gunakan Ikon pengguna, kelasnya adalah seperti berikut:

.glyphicon-user:before {
kandungan: "e008";
}

Penggunaan

Untuk menggunakan ikon, hanya gunakan kod di bawah. Sila tinggalkan ruang yang sesuai antara ikon dan teks. 

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

Contoh berikut menunjukkan cara menggunakan ikon fon:

<!DOCTYPE html>
<html>
<kepala>
   <tajuk>Bootstrap 实例 - 如何使你<gt; >    < pautan href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs. baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/ bootstrap.min.js"></script></head>
<badan>

<p>
   <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   <button class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>>;   < butang type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-order"></span>
   </button>
   <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-order-alt"></span>>;<🎜 </button>
</p>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-user "></span> Pengguna
</button>
<button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-user">< ;/span> Pengguna
</button>
<button type="button" class="btn btn-default btn-xs">
  <span class="glyphicon glyphicon-user">< ;/span> Pengguna
</button>


</body>
</html>


实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 如何使用字体图标</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>
   <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-order"></span>
   </button>
   <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
  <span class="glyphicon glyphicon-user"></span> User
</button>


</body>
</html>


Jalankan contoh »

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

带有导航栏的字体图标

<!DOCTYPE html>
<html>
 t ;  head<<栏的字体图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- >trap; -- 
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>< .
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]--> ;
  </head>
  <badan>
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
= ;   class "bekas">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=" .navbar-collapse">
            <span class="sr-only">Togol navigasi</span>
            <span class="t;<"gt; >            <span class="icon-bar"></span>
                    < span class="icon-bar"></span>
        t             < ;a class="navbar-brand" href="#">Nama projek</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
            <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
            <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>
    <!-- jQuery (Bootstrap 插件需要引入) -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

实例

<!DOCTYPE html>
<html>
  <head>
    <title>导航栏的字形图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    <!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
            <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
            <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>
    <!-- jQuery (Bootstrap 插件需要引入) -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Jalankan contoh »

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

定制字体图标

我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。

我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

下面是开始的代码：

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Sesuaikan saiz fon

Anda boleh menjadikan ikon anda kelihatan lebih besar atau lebih kecil dengan menambah atau mengurangkan saiz fonnya.

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
<span class="glyphicon glyphicon -user"></span> Pengguna
</button>

Warna fon tersuai

<button type="button" class= "btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
<span class="glyphicon glyphicon-user"></span> ></button>
Gunakan bayangan teks

<button type="button" class="btn btn-primary btn-lg" style="text -bayang: hitam 5px 3px 3px;">
<span class="glyphicon glyphicon-user"></span> Pengguna
</button>

Ikon fon tersuai dalam talian

Senarai ikon

<td

<t

ikonnama kelascontoh
glyphicon glyphicon-asteriskcubalah
glyphicon glyphicon-pluscubalah
glyphicon glyphicon-minusCubalah
glyphicon glyphicon-euroCubalah
glyphicon glyphicon-cloud Cubalah
sampul surat glyphicon glyphiconCubalah
glyphicon glyphicon-pencilCubalah
glyphicon glyphicon-glassCubalah
glyphicon glyphicon-music Cubalah
glyphicon glyphicon-searchCubalah
glyphicon glyphicon-heartCubalah
glyphicon glyphicon -bintangCubalah
glyphicon glyphicon-star-kosongCubalah
glyphicon glyphicon-userCubalah
glyphicon glyphicon-filmCubalah
glyphicon glyphicon-th-large Cubalah
glyphicon glyphicon-thCubalah
glyphicon glyphicon-th-listCubalah
glyphicon glyphicon-okCubalah
glyphicon glyphicon-removeCubalah
glyphicon glyphicon-zoom-inCubalah
glyphicon glyphicon-zoom-out Cubalah
glyphicon glyphicon-offCubalah
glyphicon glyphicon-signalCubalah
glyphicon glyphicon-cogCubalah
glyphicon glyphicon-trash Cubalah
glyphicon glyphicon-homeCubalah
fail glyphicon glyphiconCubalah
glyphicon glyphicon -masaCubalah
glyphicon glyphicon-roadCubalah
glyphicon glyphicon-download-altCubalah
glyphicon glyphicon-muat turunCubalah
glyphicon glyphicon-uploadCubalah
glyphicon glyphicon-boxCubalah
glyphicon glyphicon-play-circleCubalah
glyphicon glyphicon-repeatCubalah
glyphicon glyphicon-refresh Cubalah
glyphicon glyphicon-list-altCubalah
glyphicon glyphicon-lockCubalah
glyphicon glyphicon-flagCubalah
glyphicon glyphicon-headphoneCubalah
glyphicon glyphicon-volume-offCubalah
glyphicon glyphicon-volume-downCubalah
glyphicon glyphicon-volume-up Cubalah
glyphicon glyphicon-qrcodeCubalah
glyphicon glyphicon-barcodeCubalah
glyphicon glyphicon-tagCubalah
glyphicon glyphicon-tags Cubalah
glyphicon glyphicon-bookCubalah
glyphicon glyphicon-bookmarkCubalah
glyphicon glyphicon -cetakCubalah
kamera glyphicon glyphiconCubalah
glyphicon glyphicon-fontCubalah
glyphicon glyphicon-boldCubalah
glyphicon glyphicon-italicCubalah
glyphicon glyphicon-text-heightCubalah
glyphicon glyphicon-text-widthCubalah
glyphicon glyphicon-align-leftCubalah
glyphicon glyphicon-align-centerCubalah
glyphicon glyphicon-align-rightCubalah
glyphicon glyphicon-align-justifyCubalah
glyphicon glyphicon-listCubalah
glyphicon glyphicon-indent-leftCubalah
glyphicon glyphicon-indent-rightCubalah
glyphicon glyphicon-facetime-video Cubalah
gambar glyphicon glyphiconCubalah
glyphicon glyphicon-map-markerCubalah
glyphicon glyphicon-adjustCubalah
glyphicon glyphicon-tintCubalah
glyphicon glyphicon-editCubalah
glyphicon glyphicon-shareCubalah
glyphicon glyphicon-checkCubalah
glyphicon glyphicon-moveCubalah
glyphicon glyphicon-step-undurCubalah
glyphicon glyphicon-fast-backwardCubalah
glyphicon glyphicon -ke belakangCuba
glyphicon glyphicon-playCuba
glyphicon glyphicon-pauseCubalah
glyphicon glyphicon-stopCubalah
glyphicon glyphicon-forwardCubalah
glyphicon glyphicon-fast-forwardCubalah
glyphicon glyphicon-step-forwardCubalah
glyphicon glyphicon-ejectCubalah
glyphicon glyphicon-chevron-leftCubalah
glyphicon glyphicon-chevron-rightCubalah
glyphicon glyphicon-plus-sign Cubalah
glyphicon glyphicon-minus-signCubalah
glyphicon glyphicon-remove-signCubalah
glyphicon glyphicon-ok-signcubalah
glyphicon glyphicon-question -tandaCubalah
glyphicon glyphicon-info-signCuba
glyphicon glyphicon-screenshotCubalah
glyphicon glyphicon-remove-circleCubalah
glyphicon glyphicon-ok -bulatanCubalah
glyphicon glyphicon-ban-circleCubalah
glyphicon glyphicon-arrow-leftCubalah
glyphicon glyphicon-arrow-rightCubalah
glyphicon glyphicon -anak panah ke atasCubalah
glyphicon glyphicon-anak panah-bawahCubalah
glyphicon glyphicon-share-altCubalah
glyphicon glyphicon-resize-fullCubalah
glyphicon glyphicon-resize-smallCubalah
glyphicon glyphicon-exclamation-sign Cubalah
glyphicon glyphicon-giftCubalah
glyphicon glyphicon-leafCubalah
glyphicon glyphicon-fireCubalah
glyphicon glyphicon-eye-openCubalah
glyphicon glyphicon-eye-closeCubalah
glyphicon glyphicon-warning-signCubalah
glyphicon glyphicon-planeCubalah
glyphicon glyphicon-calendarCubalah
glyphicon glyphicon-randomCubalah
glyphicon glyphicon-commentCubalah
glyphicon glyphicon-magnetcubalah
glyphicon glyphicon-chevron-upcubalah
glyphicon glyphicon-chevron-downCubalah
glyphicon glyphicon-retweetCubalah
glyphicon glyphicon -keranjang-belanjaCubalah
glyphicon glyphicon-folder-tutupCubalah
glyphicon glyphicon-folder-openCubalah
glyphicon glyphicon-resize-verticalCubalah
glyphicon glyphicon-resize-horizontalCubalah
glyphicon glyphicon-hddCubalah
glyphicon glyphicon-bullhornCubalah
glyphicon glyphicon-bellCubalah
glyphicon glyphicon-sijil Cubalah
glyphicon glyphicon-thumbs-upCubalah
glyphicon glyphicon-thumbs-down Cubalah
glyphicon glyphicon-tangan-kananCuba
glyphicon glyphicon-hand-leftCubalah
glyphicon glyphicon-hand-upCubalah
glyphicon glyphicon-hand -bawahCuba
glyphicon glyphicon-bulatan-anak panah-kananCubalah
glyphicon glyphicon-circle-arrow-leftCubalah
glyphicon glyphicon-circle-arrow-upCubalah
glyphicon glyphicon-circle-arrow-downCubalah
glyphicon glyphicon-globeCubalah
glyphicon glyphicon-wrenchCubalah
glyphicon glyphicon-tasksCubalah
glyphicon glyphicon-filtercubalah
glyphicon glyphicon-briefcasecubalah
glyphicon glyphicon-skrin penuhCubalah
glyphicon glyphicon-dashboardCubalah
glyphicon glyphicon-paperclip Cubalah
glyphicon glyphicon-heart-emptyCubalah
glyphicon glyphicon-linkCubalah
glyphicon glyphicon-phoneCubalah
glyphicon glyphicon-pushpinCubalah
glyphicon glyphicon-usdCubalah
glyphicon glyphicon-gbpCubalah
glyphicon glyphicon-sortCubalah
glyphicon glyphicon-sort-by-abjadCubalah
glyphicon glyphicon-sort-by-alphabet-alt Cubalah
glyphicon glyphicon-sort-by-orderCubalah
glyphicon glyphicon-sort-by-order-altCubalah
glyphicon glyphicon-sort-by-attributesCubalah
glyphicon glyphicon-sort-by-attributes-altCubalah
glyphicon glyphicon-unchecked Cubalah
glyphicon glyphicon-expandCubalah
glyphicon glyphicon-collapse-downCubalah
glyphicon glyphicon-collapse-upCubalah
glyphicon glyphicon-log-in Cubalah
glyphicon glyphicon-flashCubalah
glyphicon glyphicon-log-outCubalah
glyphicon glyphicon-new-windowCubalah
glyphicon glyphicon-recordCubalah
glyphicon glyphicon-saveCubalah
glyphicon glyphicon-openCubalah
glyphicon glyphicon-saveCubalah


→