[TOC] # 在uniapp中使用字體圖標 >[info] **提示** > 字體圖標：微信小程序和Android端不支持本地字體圖標。 >[success] **解決方案** > 替代方式1：不用圖標改用圖片，但失去了矢量和方便高亮變色的好處 > 替代方式2：字體文件放到服務器，從網絡地址引用 > 替代方式3：將字體圖標轉換為base64格式字符串直接放到css里 >[warning] **特別注意** > 對于首頁底部的原生tab，是在pages.json里配置，微信只支持圖片不支持其他任何形式 其實, 如果只是H5端的話, 使用字體圖標會跟普通的Web開發一樣, 非常簡單, 但是如果涉及到小程序端的話, 使用這種方式就會出問題, 總結一下吧 ## 在H5端使用字體圖標 ### 使用Font Class 就很正常地使用, 首先下載阿里巴巴圖標庫到靜態目錄文件夾 在 `main.js` 中引入: ```js import("@/static/iconfont/iconfont.css") ``` 或在 `App.vue` 的 style 中引入 ```css @import "./static/iconfont/iconfont.css"; ``` 在組件中使用: ```pug .main .iconfont.icon-xxx ``` 通過這種方式，圖標為純色，可以通過css修改圖標的顏色和大小： ```css .iconfont font-size: 16rpx color: #f00 ``` 當然，也可以在`public/index.html`中引入線上圖標： ```html <script src="https://at.alicdn.com/t/font_1830168_xxx.css"></script> ``` ## 使用Symbol 在 `main.js` 中引入: ```js import("@/static/iconfont/iconfont.js") ``` 或在 `App.vue` 的 style 中引入 ```js import("./static/iconfont/iconfont.js") ``` 在組件中使用: ```pug .main svg.svg-icon: use(xlink:href="#icon-xxx") ``` 通過這種方式，圖標為純色，可以直接設置圖標大小。如果想要修改圖標顏色，可以先到阿里巴巴圖標庫中去色：  然后通過css修改圖標的顏色和大小： ```css .svg-icon width: 1em; height: 1em; font-size 24rpx color #f00 fill: #f00; ``` 當然，也可以在`public/index.html`中引入線上圖標： ```html <script src="https://at.alicdn.com/t/font_1830168_xxx.js"></script> ``` ## 封裝組件使用 封裝一個vue組件, 使用的時候調用這個vue組件即可 (參考了 uni-icons 的實現) ```vue <template> <text :style="{ color: color, 'font-size': size + 'px' }" class="iconfont" @click="_onClick">{{icons[type]}}</text> </template> <script> import icons from './icons.js'; export default { name: 'UniIcons', props: { type: { type: String, default: '' }, color: { type: String, default: '#333333' }, size: { type: [Number, String], default: 16 } }, data() { return { icons: icons } }, methods: { _onClick() { this.$emit('click') } } } </script> <style lang="stylus" scoped> version = 0.8 baseUrl = './' ttf = baseUrl + 'iconfont.ttf?v=' + version eot = baseUrl + 'iconfont.eot?v=' + version svg = baseUrl + 'iconfont.svg?v=' + version @font-face font-family: "iconfont" src: url(ttf) format('truetype'), url(svg) format('svg'), url(eot) format('embedded-opentype') .iconfont font-family: "iconfont" !important font-size 16px font-style normal text-decoration: none; text-align: center; -webkit-font-smoothing antialiased -moz-osx-font-smoothing grayscale </style> ``` 在同名目錄下創建一個 `icons.js`, 其key-value是對應的字體圖標的Unicode值: ```js export default { 'icon-phone': '\ue68b', } ``` 在vue中使用的時候: ```vue <template lang="pug"> .main .icon: iconFont(type="phone") </template> <script> import iconFont from '@/library/iconfont/index.vue' export default { components: { iconFont }, } </script> ``` ## 使用 uni-icons 引入 當然, 也可以直接通過 uni-icons 引入: ```vue <template lang="pug"> .main uniIcon.iconfont.icon-phone(size="30") </template> <script> import uniIcon from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue' export default { components: { uniIcon }, } </script> ``` ## 使用網絡字體 經測試, 目前這種方式在小程序和Android端中才能夠正常顯示: ```stylus version = 0.8 baseUrl = 'https://at.alicdn.com/t/' ttf = baseUrl + 'iconfont.ttf?v=' + version eot = baseUrl + 'iconfont.eot?v=' + version svg = baseUrl + 'iconfont.svg?v=' + version @font-face font-family: "iconfont" src: url(ttf) format('truetype'), url(svg) format('svg'), url(eot) format('embedded-opentype') .iconfont font-family: "iconfont" !important font-size 16px font-style normal -webkit-font-smoothing antialiased -moz-osx-font-smoothing grayscale .icon-phone:before content: "\e60a" ``` 這樣可以通過 Unicode 或類名創建字體圖標: ```pug .main .iconfont &#xe60a .iconfont.icon-phone ``` >[info] **提示** > 在APP端，要使網絡字體生效，必須加上`https://`，如果只是網頁的話，可以只寫`//`。 ## 使用base64 可以將woff2字體文件進行base64本地化(其實阿里巴巴圖標庫自帶了base64版), 這種方式小程序也是支持的, 比如: ```html <span class="iconfont icon-phone"></span> <span class="iconfont">&#xe748</span> ``` ```css @font-face {font-family: "iconfont"; src: url('data:application/x-font-woff2 charset=utf-8;base64,d09GMgABAAAAAAbAAAsAAAAADOAAAAZyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEJgqLMIh+ATYCJAMsCxgABCAFhG0HfRvLCiOSUc4Dyf5ZYLdRj5CEpkmhUGAm8IR9nyVdPLW8tg+KwYd+cK/JedLoQTz5V9Xr7o/pntkZRwc4ArhQdFIKhnBGRc6FbKXo+OcYXboY/mhcATMWL2kK0XmBLCTsyg0FGGiKjfKQNYlDsC1gjXDFGXxfyWZe/2Ly8f73WART3aSSPMYnMIw+XxKxgfKdaIC1XR2jHBnWJOuC7dpDc+ITX98dHWVIPx3gU36Ddv1RufyLE3PinyYLGIqUKrBQAA') format('woff2'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-phone:before { content: "\e748"; } ``` ## 參考資料 * [uni-app如何引入iconfont圖標](https://ask.dcloud.net.cn/question/57433)