前言:

目前正在通过 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   

uni-app引入阿里iconfont的更多相关文章

  1. uni-app 引入本地iconfont的正确姿势以及阿里图标引入

    1.引入本地iconfont iconfont文件里面包含 iconfont.ttf.iconfont.css, 将 iconfont.tt64文件转位 base64.推荐转换工具地址:https:/ ...

  2. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

  3. VUE 引入阿里图标库

    本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...

  4. day 51 阿里iconfont的使用

    阿里iconfont的使用   1. 找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中 ...

  5. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  6. vue安装openlayers,jquery,bootstrap,阿里iconfont,

    安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers ...

  7. Hexo-使用阿里iconfont图标

    Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...

  8. vue-cli创建的项目打包成app引入字体图标的问题

    将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https

  9. vue 中使用阿里iconfont彩色图标

    在main.js中 import './assets/images/iconfont/iconfont.css'import './assets/images/iconfont/iconfont.js ...

随机推荐

  1. 设计模式入门之原型模式Prototype

    //原型模式:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象 //简单来说,当进行面向接口编程时,假设须要复制这一接口对象时.因为不知道他的详细类型并且不能实例化一个接口 //这时就须要 ...

  2. nginx 配置nginx.conf,负载均衡,逻辑分流

    nginx 最重要的配置文件nginx.conf: 一般的配置我不做解释,网上到处都是,主要对主要的几点进行注释(如下) worker_processes ; error_log /data/logs ...

  3. BIOS维修技术

    BIOS是电脑中最基础且最重要的程序,为电脑提供最低级且最直接的硬件控制,电脑的原始操作都是依照固化在BIOS里的程序来完成的.因此如果BIOS出现故障将会导致影响电脑的正常工作.BIOS故障有很多, ...

  4. Bean定义并注册到spring

    1.XML配置文件 2.Annotation注解 3.Java Code 配置方式 BeanDefinitionRegistryPostProcessor

  5. backtrace、backtrace_symbols、backtrace_symbols_fd-support for application self-debugging

    backtrace是库函数引入的应用自调试函数. 系列里的三个函数可以缓冲或输出栈帧. #include <execinfo.h> int backtrace(void **buffer, ...

  6. HTML页面中点击按钮关闭页面几种方式与取消

    1.不带任何提示关闭窗口的js代码 <input type="button" name="close" value="关闭" oncl ...

  7. 在MVC中使用泛型仓储模式和工作单元来进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  8. Delphi和C++的语法区别 (关于构造和析构)

    目录 Delphi永远没办法在栈上创建一个对象 Delphi的构造函数更象是个类方法(静态成员函数) Delphi的析构函数中可以调用纯虚方法 Delphi在构造对象时自动将成员变量清零 Delphi ...

  9. TFS Server 2017 自动化部署步骤

    1 第一步,在服务器上安装TFS 2 第二步,安装完TFS后需要配置你的项目,选择管理代码的方式,这里我们可以选择传统的TFS 也可以选择GIT 方式,此处我选择的GIT 方式 3 第三步,设置代理. ...

  10. 组合模式(遍历树,file基表示文件也表示文件夹)

    组合模式多个对象形成树形结构以表示“整体--部分”的结构层次.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用具有一致性. 组合模式又可以称为“合成模式“ 或 ”整体-部分模式”,属于对 ...