uniapp 中如何使用 iconfont

最新在看uniapp的一些東西，正好用到了一些圖標的東西，整理一下分享到博客上， 與大家一起學習。

第一步： 打開iconfont官網

iconfont官網：https://www.iconfont.cn/

第二步：選擇自己喜歡的圖標加入購物車

⚠️提示： 沒有賬號的先注冊賬號

如圖所示，添加到購物車，添加到項目，創建自己的項目名稱

第三步：拷貝項目下面生成的fontclass代碼：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

 

⚠️注意：這里我選擇的是 font class，大家也可以直接下載css的代碼復制到項目的目錄下面也可以

復制紅框中的鏈接（加上 https，）直接訪問就可以看到css的源碼， 在項目目錄下創建 common/css/icons.css 文件，將代碼粘貼上去。

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

 

第四步：挑選相應圖標並獲取字體編碼，應用於頁面

⚠️注意： 在css里面引入 icons.css 的文件

<text class="iconfont icon-home"></text>

 

完成以上步驟iconfont 的基本使用就可以搞定了。

下一篇文章中將分享在 HBuilderX 中如何利用插件來實現icon 的快速使用。