• uni-app引入阿里iconfont


    前言:

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

    准备:

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

    参考文档:

      https://www.cnblogs.com/xguoz/p/10245641.html

     操作:

      一、进入网站(长得就是下图这个样子):

     

       二、搜索自己需要的资源,并添加到自己的项目当中。

        1. 项目在哪,看下图,如果没有项目自己可以快速创建一个项目,项目我的理解就是一个分类的文件夹。

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

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

     三、打开我的项目:

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

       2、选择Unicode。

      3、下载到本地。

    4、下载的资源解压打卡,拷贝 "iconfont.css"到你们项目中。

    5、将iconfont.css中的  @font-face 替换成网络资源,//at 前全部替换成 https: //at........,如下图,保存。

     

      6、iconfont.css 添加如下内容(图标可以通过text view button等组件引用)。

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

     7、资源文件已经处理好了,开始引用,可以全局应用(在app.vue中style中添加引用),也可以局部引用(指定.vue中的style中添加引用)。

     到此完成。   

    技术讨论群:  792344396   

  • 相关阅读:
    个人工作总结07
    软件项目第一个Sprint评分
    丹佛机场行李系统没能及时交工的原因
    第一次团队冲刺 5
    第一次团队冲刺4
    第一次团队冲刺3
    第一次团队冲刺2
    第一次团队冲刺 1
    风险评估
    团队开发——第一篇scrum报告
  • 原文地址:https://www.cnblogs.com/daojiao/p/10983766.html
Copyright © 2020-2023  润新知