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 ...
随机推荐
- C#下的时间测试(用于计算方法执行时间)
public class Timing { private TimeSpan m_StartTime; private TimeSpan duringTime; public Timing() //构 ...
- J2EE的13种规范
1.JDBC(Java Databaes Connectivity):JDBC API为访问不同的数据库提供了一种统一的途径,就像ODBC一样,JDBC对开发者屏蔽了一些细节问题,同时,JDBC对数据 ...
- 3-美团 HTTP 服务治理实践
参考: 美团 HTTP 服务治理实践 Oceanus:美团HTTP流量定制化路由的实践
- STorM32 BGC三轴云台控制板电机驱动电路设计(驱动芯片DRV8313)
1 序言 相信对云台有兴趣的小伙伴对STorM32 BGC这块云台控制板并不陌生,虽说这块控制板的软件已经不再开源,但是在GitHub上依旧可以找到两三个版本的代码,而硬件呢我们也可以从Olliw( ...
- 纯C语言实现链队
#include <stdio.h> #include <stdlib.h> typedef int QElemType; typedef struct QNode{ QEle ...
- Java学习——反射
Java学习——反射 摘要:本文主要讲述了什么是反射,使用反射有什么好处,以及如何使用反射. 部分内容来自以下博客: https://www.cnblogs.com/tech-bird/p/35253 ...
- Redis事务控制
Redis事务控制 1.Redis事务控制的相关命令汇总 命令名 作用 MULTI 表示开始收集命令,后面所有命令都不是马上执行,而是加入到一个队列中. EXEC 执行MULTI后面命令队列中的所有命 ...
- JS实现16进制和RGB转换
作为前端开发而言,不可避免的会遇到颜色取值,字符串和数字直接的转换,博主为此写了一个小工具,实现色值之间的在线转换. 前置知识点: parseInt, toString parseInt(value ...
- Django框架(十八)—— drf:序列化组件(serializer)
序列化组件 # 模型层 from django.db import models class Book(models.Model): nid = models.AutoField(primary_ke ...
- emacs cedet
用emacs写c或者c++代码用的插件的配置.功能是能够代码补齐. (require 'package) (package-initialize) (add-to-list'package-archi ...