MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/
这里有丰富,精美,且免费使用的矢量图标

怎么应用到自己的项目中呢?

方法一:直接下载,png 格式的图标

提示:可以自选颜色,截图:

方法二:下载代码

1.先将想要使用的图标加入购物车

2.打开购物车,点击下载代码:

3.下载后是一个压缩包,解压后就可以得到一堆东西:

4.这里面有 3 个html 文件,是说明三种常用的使用方法

5.建议使用:symbol 的那个方法
【注意】:
1.只需要引入 js 文件到项目中。
2.需要自己替换 HTML 代码中的 icon-xxx 为最上面该图标的名字,截图:

等等,三种方式,大家可以根据自己的需要选择,具体使用查看,下载代码的 html 文件的详细描述

【注意】:自己替换 HTML 代码中的 xxx 为最上面该图标的名字

MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标的更多相关文章

  1. Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  2. 在vue项目引入阿里巴巴矢量图标

    1.在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目: 2.到我的项目中,将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹(名字自定义),将 ...

  3. vue-cli 引入阿里巴巴字体图标:注意点

    vue-cli 引入阿里巴巴字体图标:注意点 下载的 iconfont.css 文件中: .iconfont { font-family:"iconfont" !important ...

  4. Captain Icon – 350+ 有趣的矢量图标免费下载

    Captain Icon 是一套一个惊人的免费图标集,包含350+有趣的矢量图标,可以缩放到任意大小而不会降低质量.图标的类别很丰富,有设计,体育,社会,天气等很多类别.提供 EPS.PSD.PNG. ...

  5. 阿里巴巴矢量图标的使用Demo

    一.html网页的使用步骤: 1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_typ ...

  6. 微信小程序引用阿里巴巴矢量图标iconfont

    最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...

  7. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  8. 微信小程序里使用阿里巴巴矢量图标

    登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ...

  9. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

随机推荐

  1. C#常用总结《一》

    集合类常用: List<T> 泛型集合 Dictionary<key,value>  字典集合 文件读取: FileStream :对各种文件读写,字节处理更好 StreamR ...

  2. RHCE 共享文件系统

    9.1 共享文件系统 概述: 共享文件系统通常有两种方式: 基于文件共享,一种直接共享文件夹给client端,常见的技术有NFS(Network File System )和 SMB (Server ...

  3. 【ORACLE】oracle 日志文件管理

    修改Oracle重做日志文件大小 创建新的日志组1 删除旧的日志组0(旧的日志组状态需要是INACTIVE) 创建新的日志组2,组名为旧的日志组0的组名 删除日志组1 ---------------- ...

  4. linux命令-寻找超过100M的文件,并将其删除

    find / -type f -size +100M | xargs rm -rf 其中第一个/表示路径,此时表示的是根目录,也就是搜索全部的文件 -type表示类型 f表示是文件 -size 表示大 ...

  5. windows下简单配置apache

    不得不做个笔记,不然每次配置都记不清楚... 详细的配置朋友这边写的很好.地址 # 对 PHP 4 LoadModule php4_module "c:/php/php4apache2.dl ...

  6. eclipse修改Properties资源文件的默认编码

    在eclipse下,打开window-->preferences-->general-->content Types-->java Properties File 将其编码方式 ...

  7. [中英对照]Introduction to Remote Direct Memory Access (RDMA) | RDMA概述

    前言: 什么是RDMA? 简单来说,RDMA就是指不通过操作系统(OS)内核以及TCP/IP协议栈在网络上传输数据,因此延迟(latency)非常低,CPU消耗非常少. 下面给出一篇简单介绍RDMA的 ...

  8. i.mx6 Android5.1.1 vibrator系统服务流程

    0. 概述 0.1 小结 下面来从APP一直分析到kernel的driver,因为vibrator是我所知的最简单的系统服务,分析过程过来,可以获取整个安卓服务的运行思路,把相关知识点都串联起来,又不 ...

  9. 第6章 通过CrawlSpider对招聘网站进行整站爬取

    通过前几章的2个项目的学习,其实本章的拉钩网项目还是挺容易理解的. 本章主要的还是对CrawlSpider源码的解析,其实我对源码还不是很懂,只是会基本的一些功能而已. 不分小节记录了,直接上知识点, ...

  10. Solr后台管理

    Solr web管理后台 访问主页:http://localhost:8080/solr/#/ 1. Dashboard 仪表盘,显示Solr的基本信息,包含solr版本,包含系统内存和jvm内存的使 ...