uni-app 使用iconfont图标字体

介绍2种方式：

一、使用class类名 添加图标

 二、使用字体代码添加图标

 

一、class类名：

在confont中，选择想要的图标，加入购物车，添加至项目：

注意： 必须要先点击 查看在线连接，然后点击Font class 才能出来 提示！！！

点击： 下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式 ， 复制代码至浏览器打开：

复制对应的css代码至你的项目中的static文件夹下，创建的iconfont.css文件中 ：

@font-face {font-family: "iconfont";
    src:url('https://at.alicdn.com/t/font_1529268_gm4lr2u34im.ttf') format('truetype') /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */;
}
	
.iconfont {
  font-family: iconfont !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-size:$uni-font-size-lg;
}
.icon-xin:before {
  content: "\e623";
}

最后，还要更新下@font-face 中的字体的url路径，替换成下边路径：

在项目中，使用css类名即可：

<view>爱心图标</view>
<text class="'iconfont font-public icon-xin"></text>

 

二、使用字体图标：

1、与上边类似，在static 文件夹下创建 iconfont.css，把下边代码复制 进去：

@font-face {font-family: "iconfont";
  src: url('https://at.alicdn.com/t/font_1529268_3djn3t6heh9.ttf')
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 30px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

2、在iconfont中，把想要的图标添加至项目，然后点击： 下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式 ，

把上边 @font-face 中的url 中的 //at.alicdn.com/t/font_1529268_3djn3t6heh9.ttf   替换成 下边红框显示的代码：

3、之后，复制字体图标代码，在标签中使用即可：

<text class="'iconfont">&#xe607;</text>