如何使用 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>
定製字體尺寸
經過增長或減小圖標的字體尺寸,也能夠讓圖標看起來更大或更小。ide
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"> <span class="glyphicon glyphicon-user"></span> User </button>
下面順便介紹一下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