uni-app引入阿里iconfont

 

 

前言：

     目前正在经过 UNI-APP平台开发移动应用，uni-app平台是去年年出才建立的一个新品台，所以资源相对比较匮乏，在此遇到一个问题，一直使用别人提供的iconfont，但老是不够用，为了解决这个问题，花了些时间给本身也搞了个字体库，如何操做，请看下文。

准备：

　　阿里巴巴提供资源网址：https://www.iconfont.cn/

参考文档：

　　http://www.javashuo.com/article/p-ssxvkuht-ck.html

 操做：

　　一、进入网站（长得就是下图这个样子）：

 

   2、搜索本身须要的资源，并添加到本身的项目当中。

    1. 项目在哪，看下图，若是没有项目本身能够快速建立一个项目，项目个人理解就是一个分类的文件夹。

 　2. icon怎么添加到项目中。

　　点击图标 -> 加入库 -> 添加到项目。

 

 3、打开个人项目：

 

   一、点击下方的 " 下方新icon....." 红色字体，生成字体代码。

   二、选择Unicode。

  三、下载到本地。

四、下载的资源解压打卡，拷贝 "iconfont.css"到大家项目中。

五、将iconfont.css中的  @font-face 替换成网络资源，//at 前所有替换成 https: //at........，以下图，保存。

 

  六、iconfont.css 添加以下内容（图标能够经过text view button等组件引用）。

text[class*="icon-"],
view[class*="icon-"],
button[class*="icon-"] {
	font-family: "iconfont";
	font-size: inherit;
	font-style: normal;
}

　七、资源文件已经处理好了，开始引用，能够全局应用（在app.vue中style中添加引用），也能够局部引用（指定.vue中的style中添加引用）。

 到此完成。   

技术讨论群：  792344396