MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标
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图标、引入阿里巴巴矢量图标的更多相关文章
- Vue中如何引入第三方icon库(阿里巴巴矢量图标库)
		1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ... 
- 在vue项目引入阿里巴巴矢量图标
		1.在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目: 2.到我的项目中,将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹(名字自定义),将 ... 
- vue-cli 引入阿里巴巴字体图标:注意点
		vue-cli 引入阿里巴巴字体图标:注意点 下载的 iconfont.css 文件中: .iconfont { font-family:"iconfont" !important ... 
- Captain Icon – 350+ 有趣的矢量图标免费下载
		Captain Icon 是一套一个惊人的免费图标集,包含350+有趣的矢量图标,可以缩放到任意大小而不会降低质量.图标的类别很丰富,有设计,体育,社会,天气等很多类别.提供 EPS.PSD.PNG. ... 
- 阿里巴巴矢量图标的使用Demo
		一.html网页的使用步骤: 1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_typ ... 
- 微信小程序引用阿里巴巴矢量图标iconfont
		最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ... 
- [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont
		React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ... 
- 微信小程序里使用阿里巴巴矢量图标
		登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ... 
- [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题
		React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size, line-height ,值为和 height 一样的高度. 例如: ... 
随机推荐
- Codeforces Round #555 (Div. 3) C2. Increasing Subsequence (hard version)【模拟】
			一 题面 C2. Increasing Subsequence (hard version) 二 分析 需要思考清楚再写的一个题目,不能一看题目就上手,容易写错. 分以下几种情况: 1 左右两端数都小 ... 
- SVN解决冲突的方法
			SVN管理代码工具在群组合作开发的过程中,若多人同时修改一个文件,就会出现冲突的情况. 冲突演示: 有A.B两个用户,他们各自从svn服务器中检出了file.txt文件,此时A.B.服务器三个地方的f ... 
- symfony4 404页面未找到
			symfony4 404页面未找到 安装好symfony4后,发现除了首页能正常显示,其他页面如/_profiler_/等其他创建的router访问都显示The requested URL /xxx ... 
- Eclipse打开时“发现了以元素'd:skin'”开头的无效内容。此处不应含有子元素的解决方法
			把有问题的 devices.xml 文件删除,再在sdk 里面 tools\lib 下找到devices.xml 文件,将这个文件拷贝到你删除的那个文件夹里,重启 eclipse 就 OK 啦! 
- javascript的简单查询和插入和修改
			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ... 
- 关于Matlab串口发送HEX格式字符
			终于想起来更新一下关于使用Matlab串口发送HEX格式字符.这个用法主要来自于我使用Matlab对机器人进行实时轨迹跟踪的绘制,由于底层限制,自己又不想在中间增加转换模块,就需要直接发送HEX格式指 ... 
- 在国内运行Flutter配置的正确姿势--如出现Oops; flutter has exited unexpectedly.
			如果根据flutter的官网教程,在运行flutter doctor时无法下载依赖,请根据以下步骤 export PUB_HOSTED_URL=https://pub.flutter-io.cn ex ... 
- Java的三个基础排序算法(其余将在以后补充)
			第一个:冒泡排序算法 原理:相邻的两个值进行比较,如果前面的比后面的大就交换位置 eg:假设有5个元素的一个array 第一次:会比较4次,将最大的值放在最右边 第二次:会比较3次,又排出剩余4个元素 ... 
- Redis之hiredis API (String)
			String // // Created by zhangrongxiang on 2018/3/7 13:48 // File string2 // #include <hiredis/hir ... 
- linux目录(转载)
			目录 1.树状目录结构图 2./目录 3./etc/目录 4./usr/目录 5./var/目录 6./proc/目录 7./dev/目录 该文章主要来自于网络进行整理. 目录结构参考地址: http ... 
