引入bootstrap圖標
截至到編寫本篇博客位置，bootstrap共有3和4兩個版本，而且使用起來，有些區別。
這要分別說怎么引用圖標了。
bootstrap3
bootstrap3的cdn：https://www.bootcdn.cn/twitter-bootstrap/，下拉選擇3.x版本的
引自官網
包括250多個來自 Glyphicon Halflings 的字體圖標。Glyphicons Halflings 一般是收費的，但是他們的作者允許 Bootstrap 免費使用。為了表示感謝，希望你在使用時盡量為 Glyphicons 添加一個友情鏈接。
使用
可以使用cdn和本地，這里以cdn演示，本地用法一致。
比如我們需要添加一個edit圖標，你只需要：
-
在官網中搜索合適的圖標，並且復制即可：
-
在HTML中的合適位置粘貼到
span標簽的class中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 單獨使用 -->
<span class="glyphicon glyphicon-edit"></span>
<!-- 結合button 的 btn 屬性控制大小 -->
<button class="btn btn-sm btn-success btn-xs"><span class="glyphicon glyphicon-edit"></span></button>
<button class="btn btn-success"><span class="glyphicon glyphicon-edit"></span></button>
<button class="btn btn-lg btn-success"><span class="glyphicon glyphicon-edit"></span></button>
</body>
</html>
本地引入需要下載，地址: https://v3.bootcss.com/，然后引入，用法一致，不在多表。
bootstrap4
bootstrap3的cdn：https://www.bootcdn.cn/twitter-bootstrap/，選擇4.x版本的
相對於bootstrap3，bootstrap4提供了更多的圖標。
使用
- 在官網選擇合適的圖標，然后點擊該圖標進入詳情頁。
- 拷貝
svg標簽即可，將它粘貼HTML合適的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 單獨使用 -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square"
viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fill-rule="evenodd"
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg>
<!-- 可以通過 width、height color 進行定制 -->
<svg xmlns="http://www.w3.org/2000/svg" style="width: 28px;height: 28px;color: red" fill="currentColor"
class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fill-rule="evenodd"
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg>
</body>
</html>
引入iconfont
要先登陸，一般通過GitHub賬號進行登錄就好了，接下來的演示都基於登錄后的操作。
引自官網
阿里媽媽MUX傾力打造的矢量圖標管理、交流平台。
設計師將圖標上傳到 iconfont 平台，用戶可以自定義下載多種格式的icon，平台也可將圖標轉換為字體，便於前端工程師自由調整與調用。
添加圖標
在使用之前需要先添加圖標。
-
官網搜索框直接搜索圖標關鍵字(中文和英文都可以)即可：
-
在結果頁面，可以篩選圖標，然后將選中的圖標添加到項目：
- 在你的項目中，就可以看到他了。
引用
阿里矢量圖有三種引用方式。
unicode引用
參考官網教程：
- 在你的項目頁面，將它下載至本地，然后解壓縮。
- 而解壓縮后的目錄內有個
iconfont.css和iconfont.js文件，你在你的項目中只需要引用這兩個文件就可以進行后續的引用圖標了。對於iconfont.css來說，還需要將下面的.iconfont類添加到該css文件中即可。
@font-face {
font-family: 'iconfont';
src: url('../font_995511_pvxa6gfhgl/iconfont.eot');
src: url('../font_995511_pvxa6gfhgl/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font_995511_pvxa6gfhgl/iconfont.woff') format('woff'),
url('../font_995511_pvxa6gfhgl/iconfont.ttf') format('truetype'),
url('../font_995511_pvxa6gfhgl/iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
- 在HTML文件中使用
i標簽(當然，也可以是其他標簽)，class屬性填寫inconfont屬性，然后標簽內容填寫unicode編碼，編碼從來我的項目中的圖標上拷貝：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./inconfont.css" rel="stylesheet">
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
注意，你只能引用你在阿里雲項目中現有的圖標，如果再添加新的圖標，就要從新下載壓縮包進行更新
font-class引用
參考官網教程：
這種方式比較簡單，也是推薦的方式。
1.阿里雲的項目中，下載樣式文件：
你也可以嘗試在線的鏈接，但我之前引用失敗了，只好下載到本地了。
- 在你HTML頁面引用壓縮包內的
iconfont.css文件，然后挑選相應的圖標並獲取類名，應用於頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./font_995511_pvxa6gfhgl/iconfont.css" rel="stylesheet">
</head>
<body>
<span class="iconfont icon-edit"></span>
</body>
</html>
symbol引用
參考官網教程：
- 在阿里雲項目中，下載壓縮包並解壓。
- 在你HTML頁面按照如下操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 必須引入通用樣式 -->
<style type="text/css">
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-edit"></use>
</svg>
</body>
<!-- 必須引入js文件 -->
<script rel="stylesheet" src="./font_995511_pvxa6gfhgl/iconfont.js"></script>
</html>
小結
這三種方式介紹官網已經說的很清楚了，這里只需要再次強調：
- 下載至本地的壓縮包內的文件可以供上面三種方式使用，而不用每次都下載。
- 但如果你往阿里雲的項目中添加了新的圖標，想要使用的話， 就需要從新下載壓縮包進行更新。
- 這三種方式，推薦使用font-class方式，簡單些，更好配置。
引入Font Awesome圖標
引自官網的話
在您的網站上使用Font Awesome展示矢量圖標和社交標志，這可是網絡上最流行的圖標集和工具包。
注意
Font Awesome有免費版和收費版兩種選擇。
截止到本博客編輯時，Font Awesome已經有了最新的5.x了，本篇博客也是介紹如何在Django中如何使用Font Awesome5.11.2免費版的圖標。
使用
有多種方式來使用Font Awesome圖標，這里演示幾種用法。
在說如何使用之前，我們需要知道如何官網搜索合適的圖標。
引用在線CSS文件
現在，你可以使用在線的CSS鏈接來使用圖標。
- 使用link標簽引入
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
>
- 使用，你將在官網搜索的圖標名稱拷貝並拼接到
i標簽的class屬性fas fa-后面即可，如想使用編輯圖標，你就官網搜edit。
然后將edit拼接到fas fa-后面得到fas fa-edit,完事fas fa-edit就是i標簽的class屬性。
<i class="fas fa-edit"></i>
<i class="fas fa-edit" style="color: red"></i> <!-- 你也可以通過style樣式來控制圖標展示顏色 -->
<i class="fas fa-address-book"></i>
現在，訪問你的頁面就行了。
完整的demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
>
</head>
<body>
<i class="fas fa-edit"></i>
<i class="fas fa-address-book"></i>
<i class="fas fa-ad"></i>
</body>
</html>
當然，這么好使的東東，肯定有CDN啦，當當當，去BootCDN拷貝去吧！
本地引用
本地下載
你可以官網下載，地址:http://fa5.dashgame.com/#/
我使用的fontawesome-free-5.11.2-web版本的百度雲鏈接：https://pan.baidu.com/s/1_7wUgF8t5E5ciqwegODOlQ 提取碼：c4qx
- 將
fontawesome-free-5.11.2-web.zip解壓到你Django的static目錄。 - 頁面中引入CSS文件。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="{% static 'fontawesome-free-5.11.2-web/css/all.min.css' %}" rel="stylesheet">
</head>
<body>
<i class="fas fa-edit" style="color: red;font-size: 20px;"></i>
<i class="fas fa-address-book" style="color: blue;font-size: 1.5em;"></i>
<i class="fas fa-address-book" style="color: blue;font-size: 4rem;"></i>
<i class="fas fa-ad" style="color: blue;font-size: 4rem;"></i>
</body>
</html>
關於 em 和 rem
在css中單位長度用的最多的是px、em、rem，這三個的區別是：
- px是固定的像素，一旦設置了就無法因為適應頁面大小而改變。
- em和rem相對於px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用於響應式布局。
對於em和rem的區別一句話概括：em相對於父元素，rem相對於根元素。rem中的r意思是root（根源），這也就不難理解了。
另外，chrome默認（當然這一尬境可以由css3解決）的字體大小是12px，也就是1em默認為12px，如果最外層的父元素直接把font-size設為1.5em，那么該元素的字體大小為18px（12*1.5）。
其他的，啥都沒有官網來的實在：http://fa5.dashgame.com/#/文檔/基本用法
歡迎斧正，that's all,see also：