現在主要用的國外的icomoon字庫和國內的阿里媽媽iconfont字體庫
爲什麼要用字體庫：佔內存小，修改方便，不用啥圖標都要去找美工了
樣式多，使用方便
拿國外的icomoon來講解：
-
選擇自己想要的字體圖標
![在這裏插入圖片描述]()
-
這裏我們可以修改字體圖片 點擊上面的那個🖊，然後就可以點擊圖標，就行修改了，這裏我修改的是第一個主頁的圖標，比如我把圖標該小了 ，煙筒位置改變了
![在這裏插入圖片描述]()
-
選擇好了後，點擊進入下載頁面
![在這裏插入圖片描述]()
-
下載完後打開文件夾將foots文件夾放在你的html文件同目錄下，一定是同級別哦
- 將下載的style.css文件中 @font-face的內容複製到頁面的style中
![在這裏插入圖片描述]()
- 再將下載的demo.html頁面打開，比如我要用wifi圖標，只要將右側的空格複製一下（都是空格，但是意思不一樣哦，要哪個都要複製一下）
放到頁面中 以放到span標籤爲例
<style>
* {
padding: 0;
margin: 0;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?xkvnwe');
src: url('fonts/icomoon.eot?xkvnwe#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?xkvnwe') format('truetype'), url('fonts/icomoon.woff?xkvnwe') format('woff'), url('fonts/icomoon.svg?xkvnwe#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
color: red;
font-size: 100px;
/* 因爲是字體，可以看成文字一樣的設置樣式 */
}
</style>
</head>
<body>
<span></span>
</body>
- 最後來看看100px的紅色大wifi
![在這裏插入圖片描述]()
收藏點贊，以備後用哦
