四.关于字体图标
image-20210814210053707
使用 iconfont 制作字体图标
设计师为我们单独提供了设计稿中的图标，为了方便使用，我们在这里把它制作为字体图标。
制作字体图标的工具有很多，在这里我们推荐大家使用：https://www.iconfont.cn/。
（1）登录 iconfont
（2）创建项目
项目名称：黑马头条移动端
项目描述：可选的
FontClass/Symbol 前缀：toutiao-
Font Family：toutiao
注意：Font Class 和 FontFamily 最好符合上述规则，例如：foo- 和 foo、abc- 和 abc
（3）上传图标到项目中
点击上传图标至项目
将图标文件拖拽到页面上传或者点击上传
选择课程资料中所有的图标文件
去除颜色并提交
如图所示，添加完成
（4）将图标资源导入到项目中
参考官方文档的使用帮助。
点击生成代码
复制链接中的代码
在项目中创建 src/styles/icon.less 并写入上面复制到的代码。
@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 标签，给两个类名，一个是字体类名 toutiao，一个是图标类名 toutiao-xxx。
<!-- 手机图标 -->
<i class="toutiao toutiao-shouji"></i>
<!-- 收藏图标 -->
<i class="toutiao toutiao-shoucang"></i>
使用 Vant 中的图标
Vant 组件库内置了一套非常精致的字体图标，除基本功能之外还支持徽标提示等功能。
<!-- 基本展示 -->
<van-icon name="chat-o" />
<!-- 设置dot属性后，会在图标右上角展示一个小红点 -->
<van-icon name="chat-o" dot />
<!-- 设置badge属性后，会在图标右上角展示相应的徽标 -->
<van-icon name="chat-o" badge="9" />
更多使用方式参见官方文档。
