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 一样的高度. 例如: ...
随机推荐
- 基于Anaconda 安装 geatpy 和 tensorflow
装了好久的第三方包终于成功了,暴风哭泣!!!总结一下 分两部分说: 一. 首先是在本地电脑windows系统下装: 首先安利一下这个包括各种 Genetic and Evolutionary Algo ...
- windows 下 pyinstaller distutils not included with latest virtualenv (16.4.0)
起因 因为windows下python3.7.2内置venv虚拟环境下pyinstaller错误问题,切换virtualenv但是发现最新版本又有其他问题 - -! ModuleNotFoundErr ...
- Mac 10.12安装Windows远程桌面工具Microsoft Remote Desktop
说明:之前Office自带的Windows远程桌面工具虽然简便,但是保存的服务器列表有限.而这个微软推出的自家工具可以完美解决这些问题. 下载: (链接:https://pan.baidu.com/s ...
- [Xarmrin.IOS]使用Build Host 在Windows上建置IOS程式及DeBug (转帖)
使用Xamarin開發IOS程式時, 必須要在Mac上才可以編譯程式,若想在windows系統上編譯,則可透過Build host的方式, 但還是要有一台Mac的電腦就是了XD 首先你的Mac必須要已 ...
- deepin安装php5.6
sudo su -echo "deb http://ppa.launchpad.net/ondrej/php/ubuntu xenial main" | tee -a /etc/a ...
- VS2015 release模式下进行debug调试
有时候软件发布,又不得不调试其中的某个dll模块, 这时候就需要在发布的release版本的软件中来调试其中的dll模块了. vs2015设置: 1.Release模式下右键工作属性,选择C/C++, ...
- 如何调用npm已经安装在全局位置的模块
参考链接 https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders npm install xxx -g ...
- C 标准库 - string.h之memcpy使用
memcpy Copy block of memory Copies the values of num bytes from the location pointed to by source di ...
- ibatis内置类型
别名 java类型 事务管理器类型 JDBC com.ibatis.sqlmap.engine.transaction.jdbc.JdbcTransactionConfig JTA com.iba ...
- SDSM框架
标题解释 SDSM指的是SpringMVC+Dubbo+Spring+Mybatis的框架 ------------------------------------------------------ ...