欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uniapp引入iconfont图标实例

程序员文章站 2022-03-31 22:38:20
...
  1. 先从iconfont网站下载项目文件,格式如图
    uniapp引入iconfont图标实例
  2. 下载好的iconfont文件如图所示:
    uniapp引入iconfont图标实例
  3. 将iconfont.css 文件放置在目标文件夹下,如图:
    uniapp引入iconfont图标实例
  4. 回到iconfont网站,点击复制代码,只需要ttf格式的地址就行
  src:url('//at.alicdn.com/t/font_1886313_rysdvk8iicr.ttf') format('truetype'); /* iOS 4.1- */

uniapp引入iconfont图标实例

  1. 打开项目中的iconfont.css文件,用复制的ttf格式的代码写进@font-face中,如图:
    uniapp引入iconfont图标实例

  2. 字体图标的使用
    uniapp引入iconfont图标实例

  3. 最后在App.vue 的 style标签中引入iconfont.css
    uniapp引入iconfont图标实例

  4. 重新编译,可以看到应的图标
    uniapp引入iconfont图标实例

相关标签: iconfont