uni-app引入阿里iconfont
<p> </p><p> </p>
<p><strong>前言：</strong></p>
<p> <span style="font-family: 宋体"> <span style="font-family: 仿宋">目前正在通过 UNI-APP平台开发移动应用，uni-app平台是去年年出才创建的一个新品台，因此资源相对比较匮乏，在此遇到一个问题，一直使用别人提供的iconfont，但总是不够用，为了解决这个问题，花了些时间给自己也搞了个字体库，如何操作，请看下文。</span></span></p>
<p><strong>准备：</strong></p>
<p><strong> </strong><span style="font-family: 仿宋">阿里巴巴提供资源网址：https://www.iconfont.cn/</span></p>
<p><strong><span style="font-family: 仿宋">参考文档：</span></strong></p>
<p><strong><span style="font-family: 仿宋"> https://www.cnblogs.com/xguoz/p/10245641.html</span></strong></p>
<p><strong> 操作：</strong></p>
<p><strong> <span style="font-family: 仿宋"> 一</span></strong><span style="font-family: 仿宋">、进入网站（长得就是下图这个样子）：</span></p>
<p> <img src="https://img2018.cnblogs.com/blog/493123/201906/493123-20190606104915936-913045851.png" alt=""></p>
<p><span style="font-family: 仿宋"> 二、搜索自己需要的资源，并添加到自己的项目当中。</span></p>
<p><span style="font-family: 仿宋"> 1. 项目在哪，看下图，如果没有项目自己可以快速创建一个项目，项目我的理解就是一个分类的文件夹。</span></p>
<p><img src="https://img2018.cnblogs.com/blog/493123/201906/493123-20190606105134210-502946404.png" alt=""></p>
<p><span style="font-family: 仿宋"> 2. icon怎么添加到项目中。</span></p>
<p><span style="font-family: 仿宋"> 点击图标 -> 加入库 -> 添加到项目。</span></p>
<p> </p>
<p> 三、打开我的项目：</p>
<p><img src="https://img2018.cnblogs.com/blog/493123/201906/493123-20190606110103358-1678225846.png" alt=""></p>
<p> </p>
<p><span style="font-family: 仿宋"> 1、点击下方的 " 下方新icon....." 红色字体，生成字体代码。</span></p>
<p><span style="font-family: 仿宋"> 2、选择Unicode。</span></p>
<p><img src="https://img2018.cnblogs.com/blog/493123/201906/493123-20190606110454668-2058277341.png" alt=""></p>
<p> 3、下载到本地。</p>
<p><img src="https://img2018.cnblogs.com/blog/493123/201906/493123-20190606110526109-34766264.png" alt=""></p>
<p><span style="font-family: 仿宋">4、下载的资源解压打卡，拷贝 "iconfont.css"到你们项目中。</span></p>
<p><span style="font-family: 仿宋">5、将iconfont.css中的 @font-face 替换成网络资源，//at 前全部替换成 https: //at........，如下图，保存。</span></p>
<p> <img src="https://img2018.cnblogs.com/blog/493123/201906/493123-20190606110906306-1531724263.png" alt=""></p>
<p><span style="font-family: 仿宋"> 6、iconfont.css 添加如下内容（图标可以通过text view button等组件引用）。</span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">text,
view,
button {
font-family: "iconfont";
font-size: inherit;
font-style: normal;
}
</pre>
</div>
<p><span style="font-family: 仿宋"> 7、资源文件已经处理好了，开始引用，可以全局应用（在app.vue中style中添加引用），也可以局部引用（指定.vue中的style中添加引用）。</span></p>
<p><span style="font-family: 仿宋"> 到此完成。 </span></p>
<p><strong>技术讨论群： 792344396 </strong></p>
</div>
<div id="MySignature" role="contentinfo">
暂无<br><br>
来源：https://www.cnblogs.com/daojiao/p/10983766.html
頁:
[1]