2-1 css加精靈圖
阿新 • • 發佈：2021-01-16
css加精靈圖
1.前言·基礎知識
1-1. visual studio code軟體
Microsoft在2015年4月30日Build 開發者大會上正式宣佈了 Visual Studio Code 專案：一個運行於 Mac OS X、Windows和 Linux 之上的，針對於編寫現代 Web 和雲應用的跨平臺原始碼編輯器。
1.Visual Studio Code 下載連結：https://code.visualstudio.com/
1.2Visual Studio Code 安裝教程：
https://blog.csdn.net/weixin_37590454/article/details/89436577
1-2 Unicode
Unicode（又稱統一碼、萬國碼、單一碼）是電腦科學領域裡的一項業界標準，包括字符集、編碼方案等。Unicode是為了解決傳統的字元編碼方案的侷限而產生的，它為每種語言中的每個字元設定了統一併且唯一的二進位制編碼，以滿足跨語言、跨平臺進行文字轉換、處理的要求。1990年開始研發，1994年正式公佈。
2.css加精靈圖步驟
1.在瀏覽器中開啟“阿里巴巴向量圖示庫”。
2.搜尋框中輸入需要的圖示：例如“相機”
3.將所選的圖示加入購物車。
4.點選購物車
→下載程式碼
→將下載好的壓縮包儲存在對應的位置（修改並牢記位置）。
5.將壓縮包解壓
→將demo_index.html
infont.css檔案複製到對應位置（修改並牢記位置）。6.在程式中加入精靈圖
6.1頭部中用link引入iconfont.css檔案。
（更改精靈圖資料夾內容可調整精靈圖大小
font-size:100px;和顏色color:purple;）
<head>
<link rel="stylesheet" href="iconfont.css">
<style>
.iconfont{
font-size: 400px;
color: purple; 6.2身體中用span標籤加入精靈圖。span標籤中的具體內容在demo_index.html檔案中找。
<body>
<span class="iconfont"></span>
</body>
link標籤：程式中引入 .css庫
link標籤格式：<link rel="stylesheet" href="地址+檔名">
地址+檔名：當前路徑：./iconfont.css或iconfont.css
上一級路徑：../iconfont.css