bootstrap基础学习十篇

bootstrap字体图标（Glyphicons）

a.什么是字体图标

字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。

b.bootstrap自带字体图标文件结构：

c.css样式中代码如下：

@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.woff2') 
  format('woff2'), 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 {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

d.用法：

如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

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

e.示例代码如下：

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

f.定制字体尺寸

通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。

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

g.定制字体颜色

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

h.应用文本阴影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
      <span class="glyphicon glyphicon-user"></span> User
    </button>
    

效果如下：

i.图标列表：

参考：http://www.shouce.ren/api/view/a/784

j.在线定制字体：

http://www.shouce.ren/tool/tubiao

图标列表