Font Awesome 一套絕佳的圖標字體庫和CSS框架

時間 2019-11-16

標籤 font awesome 一套絕佳圖標字體 css 框架欄目 CSS 简体版

原文原文鏈接

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

網址：http://fontawesome.dashgame.com/html

圖片.png

使用示例

1：引入Font Awesome圖標文件或者使用使用LESS或SASS的方法來自定義 Font Awesome 4.7.0 。前端

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

您能夠將Font Awesome圖標使用在幾乎任何地方，只須要使用CSS前綴 fa ，再加上圖標名稱。 Font Awesome是爲使用內聯元素而設計的。咱們一般更喜歡使用 <i> ，由於它更簡潔。但實際上使用 <span> 才能更加語義化。jquery

代碼示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 實例 font-awesome圖標</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></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>