1.进入阿里巴巴矢量图标库中,选择需要下载的图标,添加进项目中
2.进去项目选择Font class 模式,然后下载到本地
3.解压下载的压缩包,把.css/.svg/.ttf/.woff/.woff2文件放入到ng项目中的assets中
其中/.svg/.ttf/.woff/.woff2在assets新建一个文件夹放入其中,css文件和新建的文件夹同级
4.在css文件中进行更改@fontfamily的文件路径
例如:
@font-face {font-family: "iconfont";
src: url('../iconfont/fonts/iconfont.eot'); /* IE9 iconfont.eot?t=1575367057101*/
src: url('../iconfont/fonts/iconfont.eot?t=1575367057101#iefix') format('embedded-opentype'), /* IE6-IE8 */
/* url('../iconfont/fonts/data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), */
url('../iconfont/fonts/iconfont.woff?t=1575367057101') format('woff'),
url('../iconfont/fonts/iconfont.ttf?t=1575367057101') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../iconfont/fonts/iconfont.svg?t=1575367057101#iconfont') format('svg'); /* iOS 4.1- */
}
这是已经添加好的文件路径
目录结构
assets>iconfont>fonts(.svg/.ttf/.woff/.woff2) iconfonts.css
5.angular.json中的styles中添加进iconfont的路径
"src/assets/iconfont/iconfont.css"
6服务重启即可
- iconfont.cn阿里巴巴矢量图下载字体图标实战
1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...
- vue 项目中添加阿里巴巴矢量图
1. 选择需要的图标,添加到购物车 2. 打开购物车,添加至我的项目 3. 打开项目列表 - 更多操作 - 编辑项目 修改FontClass/Symbol前缀,自定义一个名称,例如:v-icon-cu ...
- 微信小程序引用阿里巴巴矢量图标iconfont
最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...
- 11-2 css盒模型和浮动以及矢量图用法
一 盒模型 1属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子 ...
- Android内存控制小技巧-使用矢量图来节省你的内存并简化你的开发。
先上一个 位图和矢量图的 说明.http://zhidao.baidu.com/link?url=xwvs5CBzWeh15O3Ee4bICwCqg4PCQWwg5oZ0a6CVydbVZzufqrI ...
- Material使用02 图标MdIconModule、矢量图作为图标使用及改进
1 MdIconModule模块的使用 1.1 在需要用到的模块中引入Material图标模块 import { BrowserModule } from '@angular/platform-bro ...
- Vue中如何引入第三方icon库(阿里巴巴矢量图标库)
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- 矢量图绘制工具Svg-edit调整画布的大小
矢量图绘制工具Svg-edit调整画布的大小 ------------------------------ ------------------------
- 阿里巴巴矢量图标的使用Demo
一.html网页的使用步骤: 1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_typ ...
随机推荐
- 安装win10和ubuntu双系统
2019-06-22 最近找了一份新的工作,要用到linux,由于之前基本上没有接触过这方面的东西,所以今天捣鼓一下,安装win10和linux双系统,办公研发双不误. 如果在安装的过程中遇到什么 ...
- C#中的一些对话框问题处理
1. 对于打开文件对话框处理 #region 打开文件对话框 string StrPath; OpenFileDialog Flag = new OpenFileDialog(); Flag.Mult ...
- 【Qt编程】基于QWT的曲线绘制及图例显示操作——有样点的实现功能
在<QWT在QtCreator中的安装与使用>一文中,我们完成了QWT的安装,这篇文章我们讲讲基础曲线的绘制功能. 首先,我们新建一个Qt应用程序,然后一路默认即可.这时,你会发现总共有: ...
- 转 echarts 的使用时遇到的坑 初始化和销毁,亲测有效!
纵观ECharts图表实例化的API,主要有一下几个相关的实例化方法: 1.setOption(Object option,{boolean = true} notMerge) 参数: 1).Obje ...
- OC-RunLoop运行循环
RunLoop--运行循环 作用:死循环,保证程序不退出:监听事件 (所有事件都是有它监听的):等待用户的交互: 特性: ios中所有的事件监听全部由运行循环负责: 主线程的RunLoop在应用启动的 ...
- Win2003下安装PHP5.2.0+MySql5.0.27+PHPMyAdmin2.9.1的配置方法
先下载所需要安装的东东~~ PHP 5.2.0 官方下载地址:http://www.php.net/downloads.php mysql-5.0.27 官方下载地址:http://dev.mysql ...
- linux 网站目录权限设置
Linux下Apache网站目录读写权限的设置 网站目录文件权限的设置对网站的安全至关重要,下面简单介绍网站目录文件权限的基本设定. 我们假设http服务器运行的用户和用户组是www,网站用户为cen ...
- 个人第2次作业:熟悉使用Git工具
GIT地址 https://github.com/dxg1999 GIT用户名 dxg1999 学号后五位 62317 个人博客 我的博客 作业链接 作业内容 项目作业的整个过程 作业背景 阿超家里的 ...
- 便宜的回文 (USACO 2007)(c++)
2019-08-21便宜的回文(USACO 2007) 内存限制:128 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 追踪每头奶牛的去向是一件棘手的任 ...
- luoguP4393Sequence
https://www.luogu.org/problem/P4393 题意 给你n个点的一个数列,每次可以合并两个相邻的数为他们的最大值,且代价为这两个数的最大值,求将整个序列合并为1个数的最小代价 ...