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服务重启即可

ng 使用阿里巴巴矢量图的更多相关文章

  1. iconfont.cn阿里巴巴矢量图下载字体图标实战

    1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...

  2. vue 项目中添加阿里巴巴矢量图

    1. 选择需要的图标,添加到购物车 2. 打开购物车,添加至我的项目 3. 打开项目列表 - 更多操作 - 编辑项目 修改FontClass/Symbol前缀,自定义一个名称,例如:v-icon-cu ...

  3. 微信小程序引用阿里巴巴矢量图标iconfont

    最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...

  4. 11-2 css盒模型和浮动以及矢量图用法

    一 盒模型 1属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子 ...

  5. Android内存控制小技巧-使用矢量图来节省你的内存并简化你的开发。

    先上一个 位图和矢量图的 说明.http://zhidao.baidu.com/link?url=xwvs5CBzWeh15O3Ee4bICwCqg4PCQWwg5oZ0a6CVydbVZzufqrI ...

  6. Material使用02 图标MdIconModule、矢量图作为图标使用及改进

    1 MdIconModule模块的使用 1.1 在需要用到的模块中引入Material图标模块 import { BrowserModule } from '@angular/platform-bro ...

  7. Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  8. 矢量图绘制工具Svg-edit调整画布的大小

    矢量图绘制工具Svg-edit调整画布的大小 ------------------------------ ------------------------

  9. 阿里巴巴矢量图标的使用Demo

    一.html网页的使用步骤: 1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_typ ...

随机推荐

  1. qt 界面去掉系统边框2.0版

    之前的一版存在bug.如果将鼠标放移动到界面内某个可点击的widget上(如:QPushButton)上,按住鼠标左键不放,界面可能会出现界面非预期移动的问题. 那是因为当鼠标移动到可点击的widge ...

  2. Ajax异步后台加载Html绑定不上事件

    因项目需要,需要实时从后台动态加载html,开发过程中,遇到事件绑定不上,后来百度一番,大概意思:ajax是异步加载的,页面一开始绑定事件的时候,后台数据还没有传过来,就绑定事件,这个时候找不到这个d ...

  3. .Net 高级 模拟事件模型

    第一步:创建一个类,并继承:IHttpModule using System; using System.Collections.Generic; using System.Linq; using S ...

  4. BootStrap-treeview 参考

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  5. Laravel 运行php artisan serve命令时提示No application encryption key has been specified

    创建了新的laravel项目后, 运行提示:No application encryption key has been specified 解决方法: 这个是由于没有配置好 APP_KEY 在终端上 ...

  6. PHP json中文

    json_encode 和 json_decode 只支持utf-8编码的字符串,GBK的字符串要用json就得转换成utf-8字符串 看效果 <?php header("Conten ...

  7. wc项目(node.js实现)

    一.github地址:https://github.com/Jasminejiamei/homework-wc 二.PSP PSP Personal Software Process Stages 预 ...

  8. docker的8个使用场景

    1.简化配置 虚拟机的最大好处是能在你的硬件设施上运行各种配置不一样的平台(软件, 系统), Docker在降低额外开销的情况下提供了同样的功能. 它能让你将运行环境和配置放在代码汇总然后部署, 同一 ...

  9. debian apt-get 代理

    一:在 /etc/apt/目录下建立 apt.conf 文件增加如下 Acquire::http::Proxy "http://proxyxxxxxxx:port"; 注意格式:最 ...

  10. 1-9 Python判断结构

      判断结构¶ In [3]: tang=100 if tang>200: print('OK') print('test')##有缩进就不在就不在if条件结构中   test In [6]: ...