Bootstrap Glyphicons

如何使用 Glyphicons
一般来说,我们可以得出通过 Bootstrap 3 使用 Glyphicons 的常见语法如下

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

” * ” 可以是任意代表特定图标的关键词。下面的实例演示了如何通过按钮使用它。

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

《Bootstrap Glyphicons》

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

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

《Bootstrap Glyphicons》

在线定制Glyphicons图标

下面顺便介绍一下Bootstrap的按钮

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

代码效果如下:

《Bootstrap Glyphicons》

参考地址:
Glyphicons图标教程
Bootstrap按钮效果教程

    原文作者:venk007
    原文地址: https://segmentfault.com/a/1190000004944893
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞