Glyphicons – Bootstrap 自适应网站字体图标

Bootstrap 内部包含了200多个免费图标。Glyphicons Halflings 通常只提供付费服务，这次免费为 Bootstrap 提供了这么多图标，所以如果你使用 Bootstrap 内部的 Glyphicons 图标，尽量为 Glyphicons Halflings 做个宣传，以示感谢。

使用方法如下：

Crayon-5c891d57c1a1a191931354" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">

Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">glyphicon

Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">

Crayon-button Crayon-nums-button" title="Toggle Line Numbers">

Crayon-button-icon">

Crayon-button Crayon-plain-button" title="Toggle Plain Code">

Crayon-button-icon">

Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">

Crayon-button-icon">

Crayon-button Crayon-expand-button" title="Expand Code">

Crayon-button-icon">

Crayon-button Crayon-copy-button" title="copy">

Crayon-button-icon">

Crayon-button Crayon-popup-button" title="Open Code In New Window">

Crayon-button-icon">

Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">

Crayon-plain-wrap">

Crayon-main" style="">Crayon-table">Crayon-row">

Crayon-nums " data-settings="show">

Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">

Crayon-num" data-line="Crayon-5c891d57c1a1a191931354-1">1

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a1a191931354-2">2

Crayon-num" data-line="Crayon-5c891d57c1a1a191931354-3">3

Crayon-code">

Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">

Crayon-line" id="Crayon-5c891d57c1a1a191931354-1">Crayon-o"><Crayon-v">pCrayon-e">Envelope Crayon-v">iconCrayon-o">:Crayon-h"> Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-envelope"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-o"><Crayon-o">/Crayon-v">pCrayon-h">

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a1a191931354-2">Crayon-o"><Crayon-v">pCrayon-e">Search Crayon-v">iconCrayon-o">:Crayon-h"> Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-search"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-o"><Crayon-o">/Crayon-v">p

Crayon-line" id="Crayon-5c891d57c1a1a191931354-3">Crayon-o"><Crayon-v">pCrayon-e">Print Crayon-v">iconCrayon-o">:Crayon-h"> Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-print"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-o"><Crayon-o">/Crayon-v">p

效果如下：

font-cion

当然需要引用一些css和js等外部文件，完整的使用代码如下：

Crayon-5c891d57c1a22004314119" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">

Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">bootstrap glyphicon

Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages">

Crayon-button Crayon-nums-button" title="Toggle Line Numbers">

Crayon-button-icon">

Crayon-button Crayon-plain-button" title="Toggle Plain Code">

Crayon-button-icon">

Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">

Crayon-button-icon">

Crayon-button Crayon-expand-button" title="Expand Code">

Crayon-button-icon">

Crayon-button Crayon-copy-button" title="copy">

Crayon-button-icon">

Crayon-button Crayon-popup-button" title="Open Code In New Window">

Crayon-button-icon">

Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">

Crayon-plain-wrap">

Crayon</a>-plain print-no" data-settings="dblclick" readonly style="-moz-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -o-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -webkit-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; <a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; font-size: 12px !important; line-height: 15px !important;">
<html>
  <head>
    <<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Asterisk Glyph</h2>
      <p>Asterisk icon: <span class="glyphicon glyphicon-asterisk"></span></p>    
      <p>Asterisk icon as a link:
        <a href="#">
          <span class="glyphicon glyphicon-asterisk"></span>
        </a>
      </p>
      <p>Asterisk icon on a button:
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-asterisk"></span> Asterisk
        </button>
      </p>
      <p>Asterisk icon on a styled link button:
        <a href="#" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-asterisk"></span> Asterisk
        </a>
      </p> 
    </div>
  </body>
</html>

Crayon-main" style="">Crayon-table">Crayon-row">

Crayon-nums " data-settings="show">

Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-1">1

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-2">2

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-3">3

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-4">4

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-5">5

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-6">6

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-7">7

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-8">8

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-9">9

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-10">10

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-11">11

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-12">12

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-13">13

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-14">14

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-15">15

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-16">16

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-17">17

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-18">18

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-19">19

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-20">20

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-21">21

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-22">22

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-23">23

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-24">24

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-25">25

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-26">26

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-27">27

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-28">28

Crayon-num" data-line="Crayon-5c891d57c1a22004314119-29">29

Crayon-code">

Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">

Crayon-line" id="Crayon-5c891d57c1a22004314119-1">Crayon-o"><Crayon-v">html

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-2">Crayon-h">Crayon-o"><Crayon-v">head

Crayon-line" id="Crayon-5c891d57c1a22004314119-3">Crayon-h">Crayon-o"><Crayon-e">Meta Crayon-v">nameCrayon-o">=Crayon-s">"viewport"Crayon-h"> Crayon-v">contentCrayon-o">=Crayon-s">"width=device-width,initial-scale=1"

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-4">Crayon-h">Crayon-o"><Crayon-e">link Crayon-v">relCrayon-o">=Crayon-s">"stylesheet"Crayon-h"> Crayon-v">hrefCrayon-o">=Crayon-s">"//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"

Crayon-line" id="Crayon-5c891d57c1a22004314119-5">Crayon-h">Crayon-ta">

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-6">Crayon-h">Crayon-ta">

Crayon-line" id="Crayon-5c891d57c1a22004314119-7">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">head

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-8">Crayon-h">Crayon-o"><Crayon-v">body

Crayon-line" id="Crayon-5c891d57c1a22004314119-9">Crayon-h">Crayon-o"><Crayon-e">div Crayon-t">classCrayon-o">=Crayon-s">"container"

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-10">Crayon-h">Crayon-o"><Crayon-v">h2Crayon-e">Asterisk Crayon-v">GlyphCrayon-o"><Crayon-o">/Crayon-v">h2

Crayon-line" id="Crayon-5c891d57c1a22004314119-11">Crayon-h">Crayon-o"><Crayon-v">pCrayon-e">Asterisk Crayon-v">iconCrayon-o">:Crayon-h"> Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-asterisk"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-o"><Crayon-o">/Crayon-v">pCrayon-h">

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-12">Crayon-h">Crayon-o"><Crayon-v">pCrayon-e">Asterisk Crayon-e">icon Crayon-st">asCrayon-h"> Crayon-i">aCrayon-h"> Crayon-v">linkCrayon-o">:

Crayon-line" id="Crayon-5c891d57c1a22004314119-13">Crayon-h">Crayon-o"><Crayon-i">aCrayon-h"> Crayon-v">hrefCrayon-o">=Crayon-s">"#"

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-14">Crayon-h">Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-asterisk"Crayon-o"><Crayon-o">/Crayon-v">span

Crayon-line" id="Crayon-5c891d57c1a22004314119-15">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">a

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-16">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">p

Crayon-line" id="Crayon-5c891d57c1a22004314119-17">Crayon-h">Crayon-o"><Crayon-v">pCrayon-e">Asterisk Crayon-e">icon Crayon-i">onCrayon-h"> Crayon-i">aCrayon-h"> Crayon-v">buttonCrayon-o">:

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-18">Crayon-h">Crayon-o"><Crayon-e">button Crayon-v">typeCrayon-o">=Crayon-s">"button"Crayon-h"> Crayon-t">classCrayon-o">=Crayon-s">"btn btn-default btn-sm"

Crayon-line" id="Crayon-5c891d57c1a22004314119-19">Crayon-h">Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-asterisk"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-h"> Crayon-v">Asterisk

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-20">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">button

Crayon-line" id="Crayon-5c891d57c1a22004314119-21">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">p

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-22">Crayon-h">Crayon-o"><Crayon-v">pCrayon-e">Asterisk Crayon-e">icon Crayon-i">onCrayon-h"> Crayon-i">aCrayon-h"> Crayon-e">styled Crayon-e">link Crayon-v">buttonCrayon-o">:

Crayon-line" id="Crayon-5c891d57c1a22004314119-23">Crayon-h">Crayon-o"><Crayon-i">aCrayon-h"> Crayon-v">hrefCrayon-o">=Crayon-s">"#"Crayon-h"> Crayon-t">classCrayon-o">=Crayon-s">"btn btn-info btn-lg"

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-24">Crayon-h">Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-asterisk"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-h"> Crayon-v">Asterisk

Crayon-line" id="Crayon-5c891d57c1a22004314119-25">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">a

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-26">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">pCrayon-h">

Crayon-line" id="Crayon-5c891d57c1a22004314119-27">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">div

Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-28">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">body

Crayon-line" id="Crayon-5c891d57c1a22004314119-29">Crayon-o"><Crayon-o">/Crayon-v">html

可以访问下面的链接查看都有哪些图标，以及他们对应的代码：
nofollow">http://www.bootstrapicons.com/index.htm?version=3.0.2

bootstrap bootstrap 字体字体字体网站字体图标

给WordPress菜单中UL下的某一个或某几个LI添加自定义类

我们有时候在定制WORDPRESS主题的时候，由于菜单样式的要求我...

让WordPress主题支持中文图片及中文附件上传

很多朋友在做wordpree主题制作的时候会经常遇到一个问题，那...

屏蔽wordpress后台无用菜单和模块提升wordpress运行效率

wordpress后台的模块很多，但并不是每个都经常用到。介绍几段...

WordPress导入数据库出现”Unknown collation: ‘utf8mb4_unicode_ci”之类错误的解决办法

从WordPress4.2版本开始，如果我们在MYSQL5.1版本数据中导出...

修改WordPress上传文件大小限制

很多网友会遇到这样一个问题，就是WordPress网站上传图片、附...

WordPress代码高亮插件WP-CodeBox

对于经常要在文章中出现代码的IT相关博客，安装一个代码高亮...

Glyphicons – Bootstrap 自适应网站字体图标

相关文章