使用 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: "iconfont"; /* Project id 2653381 */src: url('//at.alicdn.com/t/font_2653381_sp7hbd3vtq9.woff2?t=1625535560625') format('woff2'),url('//at.alicdn.com/t/font_2653381_sp7hbd3vtq9.woff?t=1625535560625') format('woff'),url('//at.alicdn.com/t/font_2653381_sp7hbd3vtq9.ttf?t=1625535560625') format('truetype'); }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-gengduo:before {content: "\e605"; }.icon-pinglun:before {content: "\e606"; }.icon-shanchu:before {content: "\e607"; }.icon-shoucang:before {content: "\e608"; }.icon-sousuo:before {content: "\e609"; }.icon-fenxiang:before {content: "\e60a"; }.icon-guanbi:before {content: "\e60b"; }.icon-dianzan:before {content: "\e60c"; }.icon-shouye:before {content: "\e60d"; }.icon-lishi:before {content: "\e60e"; }.icon-shipin:before {content: "\e60f"; }.icon-dianzan2:before {content: "\e610"; }.icon-shouji:before {content: "\e611"; }.icon-youjiantou:before {content: "\e612"; }.icon-yanzhengma:before {content: "\e613"; }.icon-wuwangluo:before {content: "\e614"; }.icon-wode:before {content: "\e615"; }.icon-yuedu:before {content: "\e616"; }.icon-wenda:before {content: "\e617"; }.icon-zuopin:before {content: "\e618"; }

然后在 src/styles/index.less 中加載 icon.less。

最后就是如何使用：使用 i 標簽，給兩個類名，一個是字體類名 iconfont，一個是圖標類名 icon-xxx。

使用 Vant 中的圖標

Vant 組件庫內置了一套非常精致的字體圖標，除基本功能之外還支持徽標提示等功能。

<!-- 基本展示 --> <van-icon name="chat-o" /><!-- 設置dot屬性后，會在圖標右上角展示一個小紅點 --> <van-icon name="chat-o" dot /><!-- 設置badge屬性后，會在圖標右上角展示相應的徽標 --> <van-icon name="chat-o" badge="9" />

總結

以上是生活随笔為你收集整理的Vue移动端项目——字体图标的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。