Bootstrap Glyphicons

如何使用 Glyphicons
通常來講,咱們能夠得出經過 Bootstrap 3 使用 Glyphicons 的常見語法以下html

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

" * " 能夠是任意表明特定圖標的關鍵詞。下面的實例演示瞭如何經過按鈕使用它。bootstrap

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

clipboard.png

定製字體尺寸
經過增長或減小圖標的字體尺寸,也能夠讓圖標看起來更大或更小。ide

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

clipboard.png

在線定製Glyphicons圖標字體

下面順便介紹一下Bootstrap的按鈕this

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

代碼效果以下:spa

按鈕效果

參考地址:
Glyphicons圖標教程
Bootstrap按鈕效果教程code

相關文章
相關標籤/搜索