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 ...
随机推荐
- 写一个操作 .ini文件的类
class IniHelp { private string iniPath; [DllImport("kernel32")] private static extern long ...
- 前端开发HTML5——基础标签
什么是HTML? HTML是HyperText Markup Language(超文本标记语言)的简写,他不是一种编程语言,而是一种标记语言,用于告诉浏览器如何构造你的页面.“超文本”就是指页面可以包 ...
- [Caliburn.Micro专题][1]快速入门
目录 1. 什么是Caliburn.Micro? 2. 我是否需要学习CM框架? 3. 如何下手? 3.1 需要理解以下几个概念: 3.2 工程概览 3.3 示例代码 开场白:本系列为个人学习记录,才 ...
- mac上配置python的安装环境杂记
现在的python的包都是通过pip安装的. 所以非常重要的一步是配置pip的安装源 vi ~/.pip/pip.conf [global] index-url = http://pypi.douba ...
- Swagger从入门到放弃
如何编写基于OpenAPI规范的API文档 简介 Swagger Swagger是一个简单但功能强大的API表达工具.支持的语言种类繁多 使用Swagger生成API,我们可以得到交互式文档,自动生成 ...
- 16、基于状态的iptable+高级路由(重点)
-- 基于状态的iptables 如果按照tcp/ip来划分连接状态,有12种之多 但iptables里只有4种状态:ESTABLISHED.NEW.RELATED及INVALID 这两个 ...
- ppm
PPM图像格式是由Jef Poskanzer 在1991年所创造的. PPM(Portable Pixmap Format)还有两位兄长,大哥名叫「PBM」,二哥人称「PGM」,他们三兄弟各有所长,下 ...
- idea快捷键的使用
IntelliJ IDEA 问题解决:1.乱码,主要是快捷键的字样显示乱码 中文字体显示乱码? 2.菜单项等的字体太小,怎么能设置下? -------------------------------- ...
- i++和++1
概述:i++和++i 这个问题困扰了我很长时间,在这段时间里自己不止一次的怀疑自己的智商,难道自己对编程一点天赋都没有吗?此问题严重打击了我的自信心.......也曾苦苦暗自琢磨,也曾百度谷歌疯狂搜索 ...
- JDOJ 2225 工资计划
JDOJ 2225: 工资计划 https://neooj.com/oldoj/problem.php?id=2225 Description 高考结束后,同学们大都找到了一份临时工作,渴望挣得一些零 ...