根據(jù)官網(wǎng) 小于 40kb 的字體文件可以直接本地引用。

方法如下：

首先下載字體文件。

然后刪除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。

放入到 static 下。

修改 iconfont.css 文件，如下

image

左側(cè)紅框里是留下的字體文件，右側(cè)是修改 iconfont.css 樣式。

然后，引入 樣式文件：

image

最后，就可以在 項(xiàng)目中使用了。

image

下面是 實(shí)際效果：設(shè)置了大小和顏色。

image

使用 uni-app 做項(xiàng)目時(shí)需要用到 iconfont。和 web 使用略有差別。謹(jǐn)以此記錄。

因?yàn)?uni-app 不能使用本地字體圖標(biāo)庫，所以不能直接下載使用。

1、將iconfont中需要的圖標(biāo)，加入購物車，然后放到項(xiàng)目。生成在線代碼，稍后用。

image

2、下載項(xiàng)目至本地。然后解壓取出 iconfont.css 文件。

3、將 1 中的在線代碼 copy 替換掉 iconfont.css 中的 @font-face。并且加上前綴 https: 。完成后如下：

image

這樣就是引用的 阿里巴巴的 在線圖標(biāo)庫了。

4、在項(xiàng)目中需要的地方引入 這個(gè)改好的 iconfont.css 文件。

image

HTML 部分：

image

使用圖表有兩種 方法：如上所示。其中 selfStyle 是自己設(shè)置的 圖標(biāo)樣式，就可以像設(shè)置字體那樣設(shè)置了。

至此，完成。