阿里巴巴图标库下载和使用，以及怎么在uni-app中导入使用图标库
目录
- 一、==下载阿里巴巴矢量图文件==
- ==(1)阿里巴巴矢量图页面==
- ==(2)打开图标库==
- ==(3)添加到库中==
- ==(4)添加至项目==
- ==(5)项目设置==
- 随后保存成功之后生成代码
- 测试一下看一是否是成功的 预览一下字体
- ==(6)下载至本地 下载之后即可使用==
- ==(7) 打开HBuilder X把 fonts[自定义]字体文件放到static静态文件目录中==
- ==(8) 引入字体文件iconfont.css到 App.vue文件中==
- ==(9) 测试字体是否成功的写法==
一、下载阿里巴巴矢量图文件
1、阿里巴巴矢量图地址：https://www.iconfont.cn2、也可以去搜索 阿里巴巴矢量图
(1)阿里巴巴矢量图页面
(2)打开图标库
(3)添加到库中
- 添加至项目 就是我们要用到的字体图标库文件
- 下载素材 就是可以自定义颜色和大小的图片 不如png,jpg,jpeg,svg什么的
- 下载代码 就是也是下载的的字体图标文件 格式不一样而已
** 重点是我们添加至项目中**
(4)添加至项目
(5)项目设置
- 勾选彩色彩色 ----------------------------用的时候就是彩色的图标，就不会是黑白了了
然后点击保存即可
随后保存成功之后生成代码
生成页面
测试一下看一是否是成功的 预览一下字体
预览字体成功的页面
(6)下载至本地 下载之后即可使用
文件的目录文件
(7) 打开HBuilder X把 fonts[自定义]字体文件放到static静态文件目录中
打开fonts目录之后修改里面 iconfont.css 的地址
写的时候里面的url中的目录是 （1）~@开头
@font-face {font-family: "iconfont"; /* Project id 2759842 *//* Color fonts */src: //省略-------------url('~@/static/fonts/iconfont.woff?t=1629523980990') format('woff'),url('~@/static/fonts/iconfont.ttf?t=1629523980990') format('truetype');}改成绝对路径就可以了，
(8) 引入字体文件iconfont.css到 App.vue文件中
找到项目中的App.vue import引入即可
@import url("./static/fonts/iconfont.css");
引入成功就可以去测试了
(9) 测试字体是否成功的写法
在项目中的pages页面目录中的index.vue 中测试一下 显示出来就是成功了
成功字体图标图片
阿里巴巴图标库下载和使用，以及怎么在uni-app中导入使用图标库相关推荐
- 在pycharm中导入anaconda的库
在pycharm中导入anaconda的库 下载anaconda后会发现它同时下载了许多的库,在spyder中可以正常使用,但在pycharm中会发现显示没有,用pip下载也会显示已有,以下是导入方法 ...
- ANSA二次开发 - 在ANSA中导入外部Python库
文章目录 在ANSA中导入外部python库 NumPy SciPy OpenSSL H5py PIP 和venv包和环境管理系统 PIP venv CONDA包和环境管理系统 下载Conda Con ...
- 如何在移动端app中应用字体图标icon fonts （转）
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
- 如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...
- iOS 抽取app中的图片图标资源
一.下载APP的安装包(ipa) 1,进入Mac电脑的iTunes应用; 2,找到"应用"菜单; 3,选择"App Store"; 4,在右上角搜索框里输入你想 ...
- Xcode中导入.a静态库后报错添加-force_load或-all_load
第一种方法: 以前在做项目的时候在Xcode中倒入一个三方SDK的时候,会有一些.a的静态库,这时候如果直接编译运行就会报错.当时只知道往build settings的linker flags 里面添 ...
- android ndk 在project中加入引入dll,在Android-Studio中导入“预建库”（NDK支持）
嗨我在Android Studio中制作Android应用程序(版本2.3 - NDK支持) 我有导入库的问题(dlib) 我将.so文件(libandroid_dlib.so)复制到app / sr ...
- 在PowerBI中导入自定义图标
在用PowerBI时,想要选择相应的图标icon描述指标的状态,但是PowerBI已有的icon不能满足做报表的需求,我们想导入自定义icon. 以下是操作步骤: 文章目录 1. 确定好你想要的图标 ...
- jsp中导入jsf标签库_初学jsf，自制的标签使用时报错？解决办法
当前位置:我的异常网» Java Web开发 » 初学jsf,自制的标签使用时报错?解决办法 初学jsf,自制的标签使用时报错?解决办法 www.myexceptions.net 网友分享于:201 ...
最新文章
- 假设一个学校的计算机系新建,武汉大学计算机学院《计算机系统结构》08级A卷B卷及答案...
- 在ubuntu上玩flatpak打包的游戏
- C#进行MapX二次开发之鹰眼实现
- Make it run, make it right, make it fast
- 程序人生：入门程序员最容易踩的 7 个坑！
- [Linux] 编译 与 链接
- 全套Java基础视频教程，2020最全的java自学路线图
- 百度文库刷财富值软件，如何刷百度文库财富值
- 19. 各种提权姿势总结
- 手把手教你进行腾讯云域名注册
- 5大经典排序算法在淘宝“有好货”场景的实践
- 2018年2月Ivanti英万齐(前LANDESK蓝代斯克)关闭中国研发中心
- 官场直升机 鸿蒙笔著,担当和尚：老衲笔尖无墨水，要从空处想鸿蒙
- iOS限制输入表情(emoji)
- 程序员去外包的后遗症是什么
- Micro LED - OLED注定过渡
- 每日一句：day02——From Zero To Hero
- R pdf大小_免费的pdf压缩大法
- Python学习——Numpy
- bugku 不好用的CE WriteUp