1.Font Awesome 是一個(gè)非常方便的圖標(biāo)庫(kù)。這些圖標(biāo)都是矢量圖形，被保存在 .svg 的文件格式中。這些圖標(biāo)就和字體一樣，你可以通過像素單位指定它們的大小，它們將會(huì)繼承其父HTML元素的字體大小。
你可以將 Font Awesome 圖標(biāo)庫(kù)增添至任何一個(gè)應(yīng)用中，方法很簡(jiǎn)單，只需要在你的 HTML 頭部增加下列代碼即可：
<link rel="stylesheet" />
2.i 元素起初一般是讓其它元素有斜體(italic)的功能，不過現(xiàn)在一般用來指代圖標(biāo)。你可以將 Font Awesome 中的 class 屬性添加到 i 元素中，把它變成一個(gè)圖標(biāo)，比如：
<i class="fa fa-info-circle"></i>
實(shí)例：點(diǎn)贊按鈕
<div class="col-xs-4">
<button class="btn btn-block btn-primary">
<i class="fa fa-thumbs-up">Like</i></button>
</div>
3.使用 Font Awesome 為你的 info 按鈕添加 info-circle 圖標(biāo)：
嘆號(hào)按鈕：
<div class="col-xs-4">
<button class="btn btn-block btn-info">
<i class="fa fa-info-circle">Info
</i></button>
</div>
4.為你的 delete 按鈕添加 trash 圖標(biāo)。
刪除按鈕：
<div class="col-xs-4">
<button class="btn btn-block btn-danger">
<i class="fa fa-trash">Delete
</i></button>
</div>
5.你還可以將 Bootstrap 的 col-xs-*用在 form 元素中。這樣的話，我們的單選按鈕就可以均勻地在頁(yè)面上展開，不需要知道屏幕的分辨率有多寬。
將頁(yè)面中的兩個(gè)單選按鈕放置于一個(gè) <div class="row"> 元素中。然后，添加 <div class="col-xs-6"> 元素并分別包裹每一個(gè)單選按鈕。
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
6.你還可以將 Bootstrap 的 col-xs-*用在 form 元素中。這樣我們的復(fù)選框就可以均勻地在頁(yè)面上展開了，不管屏幕的分辨率是多大。
將你所有的復(fù)選框都放置于一個(gè) <div class="row"> 元素中。然后分別把每個(gè)按鈕都放置于一個(gè) <div class="col-xs-4"> 元素中
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
7.你可以在你的 button 提交按鈕上添加 Font Awesome的 fa-paper-plane 圖標(biāo)，
方法是在元素中增加 <i class="fa fa-paper-plane"></i>
實(shí)例：
給你表單的文本輸入框增加 classform-control 。在你的表單提交按鈕中增加 class btn btn-primary 。同樣，在這個(gè)提交按鈕中增加 Font Awesome 的 fa-paper-plane 圖標(biāo)。
<input class="form-control" type="text" placeholder="cat photo URL" required>
<button class="btn btn-primary" type="submit">
<i class="fa fa-paper-plane">Submit</i>
</button>
8.現(xiàn)在讓我們把 input 元素和提交按鈕 button 放到同一行。我們將用和之前一樣的方法：通過使用擁有 row class 屬性的 div 元素和其它在它之內(nèi)的具有 col-xs-* class 屬性的 div 元素。
將你的表單中的 input 文本框和提交按鈕 button 放到一個(gè)具有 row class 屬性的 div 元素中。 將你的 input 放置于 class 為 col-xs-7 的 div元素中。 將你的表單的提交按鈕 button 放置于 class 屬性為 col-xs-5 的 div 元素中
<div class="row">
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="cat photo URL" required>
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
</div>
</div>
