博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
uni-app引入阿里iconfont
阅读量:5377 次
发布时间:2019-06-15

本文共 819 字,大约阅读时间需要 2 分钟。

 

 

前言:

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

准备:

  阿里巴巴提供资源网址:

参考文档:

  

 操作:

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

 

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

    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   

转载于:https://www.cnblogs.com/daojiao/p/10983766.html

你可能感兴趣的文章
ASP.NET应用程序与页面生命周期
查看>>
Linux--多网卡的7种Bond模式
查看>>
Oracle命令(一):Oracle登录命令
查看>>
业务建模 之 业务用例图
查看>>
EasyUI基础入门之Pagination(分页)
查看>>
一次PHP代码上线遇到的问题
查看>>
显示密码
查看>>
实现one hot encode独热编码的两种方法
查看>>
ubuntu中文英文环境切换
查看>>
[sql]mysql启停脚本
查看>>
[elk]Mutate filter plugin增删改查字段
查看>>
Java内功心法,行为型设计模式
查看>>
向github项目push代码后,Jenkins实现其自动构建
查看>>
jquery中的ajax方法参数的用法和他的含义
查看>>
BZOJ 1226: [SDOI2009]学校食堂Dining
查看>>
数组去重的几种方法
查看>>
包装类的自动装箱与拆箱
查看>>
ShareSDk的使用
查看>>
android使用web加载网页的js问题
查看>>
poj 1068 Parencodings
查看>>