使用字型圖示完整步驟
阿新 • • 發佈：2020-09-20
一、基礎使用字型圖示
常用下載：
https://icomoon.io/ 的ico的app即： https://icomoon.io/app/#/select
選擇——建立——下載
https://www.iconfont.cn/
二、下載下來的字型解壓
把內部的fonts資料夾拿出來放入專案根目錄
三、在css裡定義圖示字型
複製二步解壓出來的資料夾下的style.css把@font-face裡的定義字型樣式複製出來即可
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?qsnxg7'); src: url('fonts/icomoon.eot?qsnxg7#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?qsnxg7') format('truetype'), url('fonts/icomoon.woff?qsnxg7') format('woff'), url('fonts/icomoon.svg?qsnxg7#icomoon') format('svg'); }
四、使用圖示字型，開啟二步目錄下的demo.html
找到對應的圖示複製後面的 口 形符號，貼上到想用圖示的標籤裡
<div class='ico1'></div>
五、定義四步標籤的字型為三步的字型
.ico1{
font-family: 'icomoon';
font-size: 108px;
color:red;
}
六、完整程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?qsnxg7'); src: url('fonts/icomoon.eot?qsnxg7#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?qsnxg7') format('truetype'), url('fonts/icomoon.woff?qsnxg7') format('woff'), url('fonts/icomoon.svg?qsnxg7#icomoon') format('svg'); } .ico1{ font-family: 'icomoon'; font-size: 108px; color:red; } </style> <div class="ico1"></div> </body> </html>
效果：