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,d09GMgABAAAAAAg4AAsAAAAAEFQAAAfrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEYgqREI1EATYCJAM0CxwABCAFhG0HgUobog0zo8LGAQCpVyD7nwmZXML+TkZZd2KdE32bm5Xx/1vxUhRVNNHGN/nw/Ob+3HfvY/CCR+vHiGBGNQMr5+x+/CS0GZhB2IEd27Qx61cRAIs6LeHx+9qu4Nl39POt2DI0oEyWSw1w/hXwp/1c/R+V0PTwNmogxL/5Gezht2HmaRnzTCSJeBOthAqNSCZRYsVGbHqsipcpRrGouBwIAAGFVUSat2zvhBYMTAjqjRw2dAC0uXiwKb4E2hiNcSgDWQgeWs7HXQGwQL+evEf1bQAOPAVfqXNmi8Fo/Apv/qNqSkVvqsKzPgGguRZAAVQEsCY/ZVqP0hhXVCpYzRkWAnaG0q/8Cq/YK/FV/lfts74e38K+vCnx5u6b/1Ipuzc8FgK7A+B4/8+DBiIkCKDgwKADQRpANCAqYdDaXMIrCIDvMwaAFkwEQAOWHwRl1h6RIAGvrQChxsYDQMEWAsCBfUEkMOBNCYAO7C4ABOw/tEAaAEAODrED2gLcdoDWBXOnWkXQ6ypEpDWp6e6XaLrFypZlLEnRGJhRNrEsnc6kkxXbJSbrJB3DzzaZxEKlTJRRrcE8QyCemD8C6B+892hBtupYDeOBE0X41cenqkHB4A8R3hMWRajRQJwQr00gGyNFCCDZ7UgHZ6R79VPCcU9M0PsjanSaPhgIUQmUBjvpnFOkjUfzs2XHSslbThTglx/vLfGyW5rbKspsU+qKB5mRm+sKCcEIOHlL3ClRT8wm3LnrzHmZkffcHY7N0BjTpvaaKgIRAYFIKUYdiyNJThSJHDOdGPHnOe4/qh4LnOgVXSfDHV6+eaPFufdKwZU5OXlF1uQOqo7NnG4koTqXnptCey7x5LFLIGfNUUHbwFAoXzhsHTCCNPWHys62ZAWFoFsfsvHhfEq2lQVHK7x+khSykbw8d05OBoIDZXJAd7tzx+k+l1t8Q16rsznF1t5x7b2h3gzc9tziZSp1afMBVDSIk6lz74ebahmoVyia4Q8Cp7FIDHtswpaLQqGBGyOnWn1iNW3w2NrV+8sZLGiR9jPL6Y/ghKuvQ904ISG/BZZ22aoz/BELp0YuJY4VLfF88qXLEqS9N26dKjdrKAduF7km4HYtIg1+AOfSaBl3ON/QsGesu0ujrkO7zNAPyWQKPzjot2UaA1GwtUgG9faz4xNEl3N3it8nQySyA9XdUzTQWG8saNQ3TmjUQNXU/Heaquqqil/abo/oXCL/3rsF1HadJ5fU/mpjgif9xhywffIksxa+d/2edBRxKL8rgajaeW/PtXD60vTCDv1f1VthTqPEWocAwbFWW9gbJpA4kUpuLz5ZNHyvooIDjar9VmLBpUsLildlyWbKT160aTjowAGlWZIeMf+qoSfYRUm6yE5Qza+mI0pN0CWt5vMaNTo/fx5/jhfxFz7EC6bm5zFXVCf2IlYwwnXyGjljtUTt8QXH4/7HwssbxBpEGywbVbhwrH78aPWjv/5S+17Dvw6saVjnnqmX50iljm5bx0pxT/7GvUsXjjVY3mBZg+ioQJEZ1ZSU6rjI6fYnszvPXmgpblnYeVYoq/NRr+9Y5xu+EirJE+JI+8bOyZ+aVGrZ4nTXrOfFOG7N+Po7TjY1xJo0sFUv3oJ3Fv189YviU74EjS4XjQ+NG7xTeo0bkm4TRmdwLg5KfLuGyqSiGZVIs7592qA1+vYiLaJrPB3a67QdOqgLxazV1UrqfNjp7eFS0K0SuxzZt1bFepUrVb68d9/eil9KUO9Lw6d+014ulY5m7qtYvzK5XNmrRPrayFW/bl6I18NpULYbnzZVM8XsM099an86NSFPyazWqZ7By+0gPtP/JrkXu8axe3d6WmahAbGYudDO/xPyDnlYd7PPtMPsLfpfUa+5cGG7b5ET/1WeQi76tEASNU7xklGab3AotRW671p6R3KBTOyQF6iZ2lq6TLW2mqmbLxvLZWdleb/xetTmtvRVTZZZVqUPaK56SneTFhXudeXIlTp1H6G6aWmzYhWmlK30pfKA0UvtPu+BG1joVX1Lp6tiVdl5sXP9txyuPSboTLVh6p+727xdT3hfyMdj1tQ4AJCaw0BVAKBruLUtUwKEWnjj84In1vwP0gu0tf9uRmkH/5PzIbTJxr/TlVQGAJrgksukdaaN/8g2Q+7ft5xX6v+2EX/cptyXui5S9fbsabYWHDiVAH9bHRgBUv8z2jIQlocEU7TarfTGklEdMibChIs4AIKzAf6sMkweb4db59b9S3JrijikoRCi0KKkzBwrIh4i0pEGWjRCAipodbQIs/GgIEwHoLwfPERgsANx0OMEojC4KjPHR4iHzUekgWFzJMBFzKcUceUTCbsXRhA0qrmroGmwfpLsovqf6FIHnDWo3y9yDPmqysti+QcOyOvYI15cLWKVZerVu3c17DpSI9MZteReZDwVhbX2zDX1kx1eGEGCsEahuasGTYMdWXalz/9ElzrgKd32VX+RY1i+QoUc5RzyBx3m6nZfmsaLqyEkrJK2TL3COwnsXAkpjPZGZ9SSwy9RNJ5Q0HB2Xppvn/e3+RwAAXywTDhCCSM80ZA0oiW6H5HTSEQmemwGQYeDAV5pCOFHGPY2PXy4Yx9gWGoPLKsmADncGoi+IWCz+YCuQ75n+w7ulCRzHMwmSjaCw/i8QObg7iRxkpaC7LYWhVYZnAHSPmUP7/ww/KfsyDgSSw+ha+g2jz5NJg==') 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. Python语言获取目录下所有文件

    #coding=utf-8# -*- coding: utf-8 -*-import osimport sysreload(sys) sys.setdefaultencoding('utf-8') d ...

  2. php中函数 isset(), empty(), is_null() 的区别,boolean类型和string类型的false判断

    php中函数 isset(), empty(), is_null() 的区别,boolean类型和string类型的false判断 实际需求:把sphinx返回的结果放到ssdb缓存里,要考虑到sph ...

  3. 苹果审核之遇到IPV6问题被拒的解决方法

    情景: 等待苹果审核上线时,发现因为IPV6被拒了.这是悲剧,以下是苹果审核给我的理由: We discovered one or more bugs on Wi-Fi connected to an ...

  4. odoo12 如何设置超级用户

    在odoo12的版本中,和之前的版本有点不一样的地方 在odoo12版本之前,每个实例都是使用户名为Administrator的默认用户来创建的. 在数据库中user_id是1. 在代码中,你会发现 ...

  5. Spring事务部分知识点整理

    目录 1.数据库事务基础概念 2.Spring中注解事务的使用 3.Spring事务使用注意场景 1.数据库事务基础概念   数据库事务是对数据库一次一系列的操作组成的单元,可以包含增删改查或者只有单 ...

  6. 在js中==和===的区别

    “==”:叫相等运算符 “===”:叫严格运算符 它们两有什么区别呢? == :表示值相等则都为true ===:表示 不仅要值相等,双方类型也要相等才为true 例子如下: js代码如下: // “ ...

  7. Git的认识与使用

    Git教程 https://www.liaoxuefeng.com/wiki/896043488029600/897271968352576 Git与SVN区别 Git 不仅仅是个版本控制系统,它也是 ...

  8. Shel脚本-初步入门之《04》

    Shel脚本-初步入门-04 脚本语言的种类 4.脚本语言的种类 4.1 Shell 脚本语言的种类 Shell 脚本语言是弱类型语言(无须定义变量的类型即可使用),在 Unix/Linux 中主要有 ...

  9. 08、启动过程+at+crond+anacron

    [root@li ~]# 加电--BIOS (basic input output system)--以什么设备来启动--/dev/sda -- mbr -- grub.conf --vmlinux ...

  10. nacos 实现同机器上启动三个服务

    1.我们要在单台服务器上启动多个nacos实例,保证三个不同的端口,我们可以通过修改启动脚本: 打开启动脚本找到:export FUNCTION_MODE="all"    这一行 ...