四.關(guān)于字體圖標(biāo)
image-20210814210053707
使用 iconfont 制作字體圖標(biāo)
設(shè)計(jì)師為我們單獨(dú)提供了設(shè)計(jì)稿中的圖標(biāo)，為了方便使用，我們在這里把它制作為字體圖標(biāo)。
制作字體圖標(biāo)的工具有很多，在這里我們推薦大家使用：https://www.iconfont.cn/。
（1）登錄 iconfont
（2）創(chuàng)建項(xiàng)目
項(xiàng)目名稱：黑馬頭條移動(dòng)端
項(xiàng)目描述：可選的
FontClass/Symbol 前綴：toutiao-
Font Family：toutiao
注意：Font Class 和 FontFamily 最好符合上述規(guī)則，例如：foo- 和 foo、abc- 和 abc
（3）上傳圖標(biāo)到項(xiàng)目中
點(diǎn)擊上傳圖標(biāo)至項(xiàng)目
將圖標(biāo)文件拖拽到頁面上傳或者點(diǎn)擊上傳
選擇課程資料中所有的圖標(biāo)文件
去除顏色并提交
如圖所示，添加完成
（4）將圖標(biāo)資源導(dǎo)入到項(xiàng)目中
參考官方文檔的使用幫助。
點(diǎn)擊生成代碼
復(fù)制鏈接中的代碼
在項(xiàng)目中創(chuàng)建 src/styles/icon.less 并寫入上面復(fù)制到的代碼。
@font-face {font-family: "toutiao";
src: url('//at.alicdn.com/t/font_1807762_wgyu54o0zqf.eot?t=1589027112128'); /* IE9 */
src: url('//at.alicdn.com/t/font_1807762_wgyu54o0zqf.eot?t=1589027112128#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAA6cAAsAAAAAGWQAAA5PAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFCAqiOJsEATYCJANUCywABCAFhGEHgWsbvRQzo/aKtHIj+68TOLk/rA4NzelemIqYKGADNS3cBGGZYhXxhGHPqFssG/nviwhGmDLdaH9NISjU45jgn28u/Psyk2wywcUSoSJUrUVUjMfXVqFmi+gY/ne8ATA9bevfslQtNvgPzMRKxEIPIwpMxAzMvij0MhIuIhn8OjinnU1taARnfeUQ1VkCJXaxY0ia/wrJAffd/qb9jW0UQnXJs3/56SmE0UeTPkg6btCuGjbJ8h5ABSs4gW3S6oTFu4IqY2bWcEfzCLKI216BhALwe7x9PUDgoPP/1lKbyXus7iLciCMX8GZnb3+y//iXJ8R7KcwGWBVJ9dXICjVT3C0HyaUudSQrXIWzlYUAc6pPalwgiQOkqA7b3G77ratDgKM9fdHUz/BYEGJRGTFtdSzIAuHGaWwmKsJCkPiodTqFT+gd9t7hZPzz+jZYIXj4BvU1c5YG5oKJHz/WzK4mW2za0c7lJFB+CgzQF7CgbcmOrZgF9o1Zl+qwTMtnLPM+1ppN8BGfrq2N38Ng8d+XWiIkwhGTkJKRU1Cmwj+8KjVQgJqQAIhFQB0+YglFgPAACANAWADCByACAKIEQIQARARAOAAiBiASACIFIDIAIgcgCgCiDEBUANL5XJUMMlejknTrPw70BjaAPwKCP1X+tMxanerhE2HGIhz+rhcQ4glM0fjd2ll1CzspUaq6qlsgq2szuRazalX176XCWacEfVHIxXFSyTVSETvLkkxts9ZKVUsTRa7i8ixRRV2ThvKiXVVrfL2cC4yrIs7/fywkY33sffXqSTr5vTlhA5C4pdbYXVc0Y5q34FwAvENnnANsy/4c33TWTQTXaW3CpKKetxjB5B3NnrT3RWxogb7p528AZHqQnrwuBqxXZAxsXAMJaXi7VFeU33jzZrbsEQIdoHazF4sGCLmc/M5QUxPdI5X7cdhHo8qE/Oq4Soviac2t7lhCMrXtpRkXO9GxGMt2ZYygrUpzvFTFYXmlS1ksGKooT1kiBamqwGWvSmUJGwlkaI3mqJkADXDEVrXDrOVWTDg85EHICczOWJqVe7z8RFVR3Cg2DJLGre4Qk3RRDne7wGmATGsXFClqaz7PmuwyuizMH1zuyH1Nv9db6ozdmTDbBJ+00V3oXIx/9Dc4s/a5UDFm1ydeqjEZL5Vvemia0IkbceXGEuHkVbFAkUB47OjytJsoiBK7CYpGZQwlCgjL4grV18NFF05qDxkvE6pL3SR1zTfu7gs9vfU5U3eD4RcPQXf6fi7MldtINKKHwk6oJMQslxk2RiXohTzNUwCwBEuaBTLbFO18A0VJPZHeQbfcWtQndjz0fsB6Z+7/fPSzN7nzzoVID1C5/KiUs5kxwBZlmWSJkVkUQT5xDKgUT5uz5HV277EnHsRdG7NMQiQmWAJaciw0VOcwUaBBtcJWQs9/17ozfwfjz37WOJPf+1K8J6297rgFYrXxOWOqK8y75RTV5wxmMYBEAxYO38bv+c3F1TD++DV/EMfDO5ETrnGl1ugPohjlPtPvZTzFlmhNX6AedrvTeX0vczMJ0Ldd4BNWDkPt3bp9LIF3KlKlBdKoQm5KBDW2p38PgKffq8sqy60O6IOK2IPIYJ8lIewOsw2qmDRgSmiXOQWJmucRFxs0ttjrbyhHnEovVn7jkMNwKCfnbIoKO2hK3LI78cDvl39kkVFN8p/2BJuwIZxdKFGa6NyqV9MrzFDKYtjnbWlyncNBkE0+4NjDch92IF9W8UQGdUiRzuPOJoYrFW/IRxWD5RWSSdA3gsc9Abm2c4fOHVj6HaN0+eTT/uiLl85abSFQR0SlyKoJb+Zsxpz4bRtzr5AJ2DRYpPJDJ5vZzFg+ZYStXyWTWerrhly+Lf7A739EeqCA4dSfzVJ1T1n6yrC7ZKxYzDplbnE+w6UpK8lvukqSKiwmFkrcUqeP0If1fvLgn4uLvHDbuMf6MBIQGVpJtIRqQvF9MUAf8hk92l4G3iL1HZKhG2a0e1kVLie7MOpDog7jKJYMlk5J5H87MugncUdDH4UEj2Q+9S/2DupTPxJpeLsuh+1BOMHE3rJ4bEtuW1cZmRvgY9hyQ/iaEYB/HIGRGA9kxRB5Ng7xAcLybkgzDRdjzeWdxdBf+jwZH+AELPyakL3cJpKG4WUguIWMBKAddl/u6mHjUOzncsL4cbX+jYCXQUn0hi+G4waVUCwq5Oqktj1kjU82JhBwxZPT0gucHsbvajennzVc2xw34pLV8RsTOQPNzOG2VTbHoqwzqKdFnjwzvQNfp4XWCPKLfP6m6j9IyCnllWiM671RSROA/+ZGv8uWl/18vztQNcR2rUYtetIbtPYHaYOQ5o4OpYXS4IvFF1mHHpwznysvURYQWT+9VybQ4AvBHTIwb0WFBuHsqipOOCdiq+nlhFVVywChQQLkAQk6XcUil85JrGAtcxPP8wUeCRwhJ7yqqoIbzVavX/cgEBxAz6aktkwCUncHWQeZdljbWKO6CyKjF1qY8Kxx1pT1FKOHU9gJAnNhibfNoM2OAetB6+0DxSEMAgHx1C51q36cPqIfu4O5g09CSIH65/3x5/aXCwQ4BOe6JEwJh1pebH4WzLborWC6mqs7bN6+59vyJzbST8aoUpFybZ2jeG2BsvnHZ+Nsm9lz3w4cx2a2uXoEs/F52LXyt3+vSd1p3Kv2o/nKsX+8z0ZGe65u361cY2Surv4Or2+0sLS4JtX9XV2/0GWNcu9Wru41/GzEw7cvU7bZA5sA/010BfRMimIT52rUXL1rvgmJA8aqrt6vVaGiqx5u3BxFklXJgMYMGJoKetLuYJPdaU+geZLy4Lj+4DsqVtFfgQWuoOaEAMrOhgRDxgpPCKCN2fa7D/kHBWkOabqI/4moCHrIBkad4D6bzbtx/wE1j/rgBcV29pJ/KmqeXKH1hTC1ariRR+q1yRv5HL6emEdS1hXJuiwdihtFh8lQ/Vj2/n9T2vvvhcoYRSfj3fD2hBl8XDaFy/2yDEEDYrQEG1gmpd94QhOQlQ9DbyjJQtrjhyPcEb8v6Cj4az1Ucx4WYmft/8NV8iukZVJ+Ja6Q6TSSKZHmYXdcZekAW63SbmRqLex8FKu+b//o6fjD6z9/Y+Dohxga308S4URV8nztAsbmPE6ufm7MngxL4/QB+OBluN8MFKUBlKRDl53bL7QMI23y4tPLe/GIXs/s8PIdJB+IwGdnP726yyEGFSspj4XOLALlZVBsPNJVTRcVPH+OEBwqZMVXFaRdohCe9CFpEWvkuvIa4uOfNbXK0M2Oi/smtCLp0KJB79vCOJoWxcLlexHW4YM5FAWhNFLpTDq1cbGJfw0qlLi/XwyJoIGjkFh1j50Ow7IL22UoXdp+0WmGctKvsyGhSCQsIpBYNHq4KY1daMolB7+JUJVfCYkGBkRQPmroBCrvIrNRQNN+B9eF62Z/5IDNZXckl9hJ3x+N+hs5RzKL0nBZQ6ChwsTPL04zEbQanxIyow/eAIoB9hdhpCHP4zC77tkjvlfMguViBoiICsV2jW7bSGeI2YfCAg4HG4XHJ3LTzXIus+u+XZoVLrAyPFBSo6lAVR+93MV4AlcfuQTWIHLPdEGvbq+70KNrGA7N2cnZuUcPoQAvOQHD0kyihZgGcJM2FdYRQpBUCRBCyXV1yVAK9OBCHIIwRRKK1BM2rXRMMuXTg0ONEaedkarIU8VjgJeYGADxIISzVqNJPBAARLCuQCXfQqAzgqh+LPvYDWlqYwWXtbasIAadeVgO1qVGLENLl9/Pd3xz8RODHfilbodxSyvu8RwZfkle4cpCzQgyku8v/3TxTb6jVxpqRVgqxfLs5ws8Y0lYkq/n3vsq4pLJyMUI5gfEEr1sV/UK5kfEAjPXZ1n93eGU0eKUyf0bZq1PRlsiH5krqhnVi7hY+/BARfMSW4AX2GbfOXmSq8ft6nZkLYg7eeLO7bFb8eCgkyv3zp1peRzB5D0Gs/Cm/VfTtviVK1ny0KCR24eyfITf3c0H+XPT0/z4OFrc4KDT3r69YQMaeHrOTCue2DmMtraluo70qv1ReuAdi9cH0gLn+onVZ88WaCo0w2wigH2OotVqtBs9+s/sUVjL2VlYaP5VH+U/wHDY6AdQR44ctWwO5gGlDmyOAAX7khEWQkmkbry+bkObhu6S3StCQYv6HwDzp6w13pEvc8Hkl74TSIfPUJhUfscWY8XPWWPc+XBGsIQ3h4db+XEmsD/vyQCu4VszhmP4T0OGogxygcvnFe5MUQSgD3XG+4C33XUjjHzKDVPascWdU2Rb8CWd3x1eB+aX3yGD5vU7JP1/YvjRk1NmUVyONbP2jsAQ71Cn4DcFssYvFXNt763qTN2+XodlnfNdVqxjVddClHt6s1k91/WW46lzNEV5HuB0DzRFT4WX9cjXK9seSxtOybyqtsxUdWG2qnfMJ2ZQLKDE2JijD1Pmx1RZi0E1HqI3u4mJjLPMq7rETNUNZquexXwavIsFZPwVcywS7itjumvJY8u3DJrBqn5T0RA680l+MAlHTd/gJen8DuFN/5BLJFRt1exc/gKEfHpImX3H7JTLNKrPM60NUiI1ZRrAcBWYp2ddu1RoZWjcPXZvGTT7VKvot5bREDrJDytJ+Juipm/wknROX2Uj9R9ysS/yYoqWiibPvrJY5ap18JfZd+8eO2Uxi0uj4rNWFpjKMVJMaRzkRMMV4QRvelLru7mq2ap1+XHqI1yHOoa6PBlZ+QpUUqhITrESpcqUq1BZFVVVU10NrjZqfJn8LS6tuy4D9Fbo4kVjH28OcN2/VH8tQaMJcp0i+iR4K4HElJnLnIYYMErlvABavSZJyum26NvgsZ0XwznHj/q+yKJP9dHjJTS8hzHJaSEL503AyiVhX4BSPNep3Q4=') format('woff2'),
url('//at.alicdn.com/t/font_1807762_wgyu54o0zqf.woff?t=1589027112128') format('woff'),
url('//at.alicdn.com/t/font_1807762_wgyu54o0zqf.ttf?t=1589027112128') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1807762_wgyu54o0zqf.svg?t=1589027112128#toutiao') format('svg'); /* iOS 4.1- */
}
.toutiao {
font-family: "toutiao" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.toutiao-dianzan:before {
content: "\e600";
}
.toutiao-dianzan2:before {
content: "\e601";
}
.toutiao-gengduo:before {
content: "\e602";
}
.toutiao-guanbi:before {
content: "\e603";
}
.toutiao-fenxiang:before {
content: "\e604";
}
.toutiao-shanchu:before {
content: "\e605";
}
.toutiao-pinglun:before {
content: "\e606";
}
.toutiao-shoucang:before {
content: "\e607";
}
.toutiao-shouji:before {
content: "\e608";
}
.toutiao-shipin:before {
content: "\e609";
}
.toutiao-wenda:before {
content: "\e60a";
}
.toutiao-sousuo:before {
content: "\e60b";
}
.toutiao-shouye:before {
content: "\e60c";
}
.toutiao-yanzhengma:before {
content: "\e60d";
}
.toutiao-wuwangluo:before {
content: "\e60e";
}
.toutiao-zuojiantou:before {
content: "\e60f";
}
.toutiao-wode:before {
content: "\e610";
}
.toutiao-yuedu:before {
content: "\e611";
}
.toutiao-youjiantou:before {
content: "\e612";
}
.toutiao-zuopin:before {
content: "\e613";
}
.toutiao-lishi:before {
content: "\e614";
}
然后在 src/styles/index.less 中加載 icon.less。
引入到全局樣式中,或者直接加載到main.js中
/**
* 全局樣式
*/
@import "./icon.less";
最后就是如何使用：使用 i 標(biāo)簽，給兩個(gè)類名，一個(gè)是字體類名 toutiao，一個(gè)是圖標(biāo)類名 toutiao-xxx。
<!-- 手機(jī)圖標(biāo) -->
<i class="toutiao toutiao-shouji"></i>
<!-- 收藏圖標(biāo) -->
<i class="toutiao toutiao-shoucang"></i>
使用 Vant 中的圖標(biāo)
Vant 組件庫內(nèi)置了一套非常精致的字體圖標(biāo)，除基本功能之外還支持徽標(biāo)提示等功能。
<!-- 基本展示 -->
<van-icon name="chat-o" />
<!-- 設(shè)置dot屬性后，會(huì)在圖標(biāo)右上角展示一個(gè)小紅點(diǎn) -->
<van-icon name="chat-o" dot />
<!-- 設(shè)置badge屬性后，會(huì)在圖標(biāo)右上角展示相應(yīng)的徽標(biāo) -->
<van-icon name="chat-o" badge="9" />
更多使用方式參見官方文檔。
