在bootstrap框架的使用中，字型圖示必不可少，Font Awesome 一套絕佳的圖示字型庫和CSS框架，值得學習。

網址：

###使用示例
1：引入Font Awesome圖示檔案或者使用使用LESS或SASS的方法來自定義 Font Awesome 4.7.0 。

<link href="" rel="stylesheet">

您可以將Font Awesome圖示使用在幾乎任何地方，只需要使用CSS字首 fa ，再加上圖示名稱。 Font Awesome是為使用內聯元素而設計的。我們通常更喜歡使用 ，因為它更簡潔。但實際上使用才能更加語義化。

###程式碼示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 例項 font-awesome圖示</title>
	<link href="" rel="stylesheet">
	<link rel="stylesheet" href="">
	<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></script>
	<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></script>
</head>
<body>

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp;主頁</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; 圖書館</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; 提交申請</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; 設定</a>
</div>

</body>
</html>

###效果如下

原文作者：祈澈姑娘

Font Awesome 一套絕佳的圖示字型庫和CSS框架

相關文章