iconfont图标引入方法
2024-04-24 15:45:41
iconfont图标引入方法
- 图标库链接
- 阿里巴巴矢量图标库链接: [https://www.iconfont.cn/](https://www.iconfont.cn/).
- 使用方式
- 引入方式
- 添加至项目
- 下载素材
- 1.svg
- 2.3 省略(图片正常引入)
- ~~~下载代码(相当于单个项目)~~
图标库链接
阿里巴巴矢量图标库链接: https://www.iconfont.cn/.
使用方式
1.搜索需要的图标
2.将喜欢的图标添加到购物车
3.打开购物车
引入方式
添加至项目
1.1 加入项目
1.2.创建项目
2.3 选Font class(默认)下载至本地
2.4只解压当前四个文件到文件目录下(建一个新文件夹装)
2.5通过import进行导入到index.css文件中
import './assets/fonts/iconfont.css'
2.6使用
<p class="iconfont icon-hanbao"/>
下载素材
>>>>>>>>
1.svg
1.1直接放入html中
<body><?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon"width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#f4ea2a"d="M486 234.5c5.4 5.6 18.5 8.9 29.3 7.5s15.2-7.1 9.8-12.6c-5.4-5.6-18.5-8.9-29.3-7.5-10.9 1.4-15.2 7-9.8 12.6zM652.2 236.2c10.1-4 13-10.5 6.4-14.6s-20.1-4.2-30.2-0.2c-10.1 4-13 10.5-6.4 14.6s20.1 4.2 30.2 0.2zM582.5 200.7c7.9-2.6 7.3-9.3-1.5-15-8.8-5.6-22.3-8.1-30.2-5.5s-7.3 9.3 1.5 15 22.3 8.1 30.2 5.5zM475.7 174.6c-10.9 0-23.5 5-28.1 11.2s0.4 11.3 11.3 11.3 23.5-5 28.1-11.2c4.6-6.2-0.4-11.2-11.3-11.3zM402.8 216.6c5.4-5.9 1.2-11.4-9.4-12.3-10.6-0.8-23.7 3.3-29.1 9.2s-1.2 11.4 9.4 12.3c10.7 0.9 23.7-3.2 29.1-9.2zM525 803.7c5.4-5.6 1-11.2-9.8-12.6-10.8-1.4-23.9 2-29.3 7.5-5.4 5.6-1 11.2 9.8 12.6s23.9-1.9 29.3-7.5zM622 797.1c-6.6 4.1-3.7 10.7 6.4 14.6 10.1 4 23.6 3.9 30.2-0.2s3.7-10.7-6.4-14.6c-10.1-4-23.7-3.9-30.2 0.2zM552.3 837.9c-8.8 5.6-9.4 12.3-1.5 15 7.9 2.6 21.5 0.2 30.2-5.5 8.8-5.6 9.4-12.3 1.5-15s-21.4-0.1-30.2 5.5zM447.6 847.3c4.6 6.2 17.2 11.2 28.1 11.2s15.9-5.1 11.3-11.3-17.2-11.2-28.1-11.2-16 5.1-11.3 11.3zM364.3 819.5c5.4 5.9 18.5 10.1 29.1 9.2 10.6-0.8 14.9-6.3 9.4-12.3-5.4-5.9-18.5-10.1-29.1-9.2-10.6 0.9-14.8 6.4-9.4 12.3z" /><path fill="#f4ea2a"d="M923.6 595.7c-5.9-5.1-13.1-7.7-20.8-8 3.9-11.6 5-24.5 2.1-37.4-3.6-16.2-13.9-33.3-32.3-44 20.3-9.6 28.6-21.9 31.9-37.5 0.1-0.5-0.1-1 0-1.6 7.1-0.7 13.6-3.3 19.1-8.1 12-10.2 16.5-28.5 11.4-46.4-6.3-22.4-24.8-39.1-50.4-46.8C873 241.6 717.8 108.7 512.7 108.7c-72.9 0-144.7 17.5-207.7 50.6-8.8 4.6-12.2 15.5-7.6 24.3s15.5 12.2 24.3 7.6c57.9-30.4 123.9-46.4 191-46.4 179.1 0 320.5 113.3 335.7 217.8H177c5.3-37.1 26.3-75.5 60.6-110 7-7.1 6.9-18.5-0.1-25.5s-18.5-6.9-25.5 0.1c-43 43.3-67.9 93.1-71.6 141.4-18.2 8.1-50.6 25.8-53.2 51.8-1.1 10.3 2 25.4 22.8 38.7 7.6 4.8 14.9 8 22 10 2.1 10.4 12.7 23.6 45.9 35.3l-58.2 80.1c-1.7 2.4-2.6 5.1-3 7.9-2.2 1.2-4.4 2.2-6.7 3.6-20.8 13.3-23.9 28.4-22.8 38.7 2.6 25.8 34.5 43.5 52.8 51.6 4.2 77.1 53 229.1 372.7 229.1 83.1 0 154.1-10.7 211-31.9 9.3-3.5 14.1-13.8 10.6-23.2-3.5-9.3-13.9-14.1-23.1-10.6-52.8 19.6-119.6 29.6-198.4 29.6-206.8 0-325.3-66-336.2-186.4h672.3c-3.3 32.8-16.6 73.9-55.7 109.1-7.4 6.7-8 18-1.3 25.4s18 8 25.4 1.3c41.2-37.2 64.3-85.4 67.8-139.9 25.4-7.7 43.7-24.4 50-46.7 5-17.9 0.5-36.1-11.5-46.4zM180.7 467c3.6-1 7.1-2 10.5-3 10.8-3.2 22-6.5 34.3-7.6 29.1-2.7 49.1 2.6 66.9 7.2 21.6 5.6 43.9 11.5 70.5-2.6 32.3-17.2 85.7-11.4 98.3-3.7 44.3 27.1 84.6 11.1 108.7 1.5 6-2.4 11.6-4.6 15.2-5.3 12.6-2.6 25.1 2 41 7.9 15.8 5.8 33.9 12.5 55.6 12.5 12.8 0 26.9-2.3 42.4-8.6 50.7-20.5 62.1-16.5 80.9-9.8 26.9 9.6 45.8 7.9 59.5 6.7 1.7-0.2 3.1-0.3 4.5-0.4-8 33.5-193.7 37.3-392.9 36.7-194.9-0.7-268.4-19.7-295.4-31.5z m646.7 63.4c1.4 0.4 2.8 1 4.4 1.1 20.5 0.8 34.4 10.5 37.9 26.6 3 13.4-2.2 27-12.4 32.3-0.8 0.4-1.4 1.2-2.1 1.7-12.7-0.7-28.8-0.3-50.1 7.3-18.8 6.7-30.2 10.7-80.9-9.8-41.8-16.9-73-5.4-98 3.9-15.9 5.9-28.3 10.5-41 7.9-3.6-0.8-9.2-3-15.2-5.3-7.1-2.8-15.7-6.1-25.3-8.8 144.8-23 239.3-45.5 282.7-56.9zM123 423.8c2.1-6.1 20.9-18.4 38.6-25.2 0.1 0 0.1-0.1 0.1-0.1h704.1c24.4 4.1 31.8 16.9 33.8 22.3 2.2 6 1.1 10.2 1.2 10.5-0.4 0.2-1.9 0-4.4-1.2-12.6-5.8-24.1-4.9-35.2-3.8-12.2 1.1-24.7 2.2-44.3-4.7-29.3-10.4-49.3-12.8-106.5 10.4-28.8 11.6-48.8 4.3-72-4.3-18.7-6.9-38-14-60.8-9.4-6.7 1.4-13.7 4.2-21.2 7.1-22.4 8.9-47.7 18.9-76.7 1.2-24.2-14.7-91-20.1-133.9 2.6-13.6 7.2-23.5 5.1-44.5-0.4-19.6-5.1-44.1-11.5-79.3-8.2-15.8 1.5-29.3 5.4-41.1 8.9-23.3 6.8-35.2 9.7-51.7-0.9-4.3-2.8-5.8-4.8-6.2-4.8z m90.7 92.2c0.4-0.5 0.4-1.1 0.7-1.6 51.2 11.3 132.7 19.6 261.6 20.1 12.9 0 25.3 0.1 37.4 0.1 50.4 0 94.3-0.4 132.6-1.3-33.5 6.3-71 12.8-112.7 19.4-154.9 24.4-300.6 25.8-364.4 25.1l44.8-61.8z m243.7 83.2c-10.2 4.1-31.1 7-53 5.3 17.3-1.5 35-3.3 53-5.3z m442.4 34.9c-2.1 5.5-9.6 18.7-34.8 22.6-0.2 0-0.4 0.2-0.6 0.2H162.6c-0.3-0.1-0.5-0.4-0.9-0.6-17.7-6.7-37.3-19.6-38.8-24.3 0 0 1-2.2 6.5-5.7 16.5-10.6 28.4-7.8 51.7-0.9 11.9 3.5 25.3 7.5 41.1 9 35.4 3.3 59.7-3.1 79.3-8.2 21-5.5 30.9-7.7 44.6-0.4 43 22.8 109.8 17.3 133.9 2.6 28.9-17.6 54.3-7.6 76.7 1.3 7.5 3 14.5 5.7 21.2 7.1 22.7 4.7 42.1-2.4 60.8-9.4 23.2-8.6 43.2-15.9 72.1-4.3 57.1 23.1 77.2 20.7 106.5 10.4 19.5-7 32.1-5.8 44.3-4.7 11.1 1 22.6 2 35.2-3.8 2.4-1.1 3.8-1.3 3.7-1.6 0.4 0.7 1.4 4.9-0.7 10.7z" /><path fill="#f4ea2a"d="M256.7 220.8c2.9 1.7 6.1 2.6 9.2 2.6 5.2 0 10.3-2.3 13.8-6.4 7.2-6.9 7.5-18.3 0.6-25.5s-18.3-7.5-25.4-0.6c-1.2 1.1-3.6 3.8-4.4 5.2-5.1 8.6-2.4 19.6 6.2 24.7z m14.6-12.7l-0.7-0.4-3.3-3.7 4 4.1z" /></svg></body>
效果:
1.2 当图片文件引入(css,object类似)
<body><img src="./hanbao.svg"></body>
注: 作为普通的图片使用，无法展示动画效果
1.3 读取SVG源码
var svgStr = new XMLSerializer().serializeToString(document.getElementById("Svg"));
console.log(svgStr);
2.3 省略(图片正常引入)
~下载代码(相当于单个项目)
iconfont图标引入方法相关推荐
- 添加新的iconfont图标的方法（看了就会）
一.用Unicode引入新iconfont图标 Unicode方法引入只需要保留下载的.tff.woff.woff2等字体文件,其他文件都是无关的 1.将阿里给的@font-face{-}复制到你项目 ...
- iconfont图标引入及线上使用流程（无需下载图标到本地）
1.选择图标加购物车 进入阿里巴巴矢量图标库https://www.iconfont.cn/ 输入图标名称,搜索图标 找到想要的图标,加入购物车 2.打开购物车,添加至项目 打开购物车,点击添加至项目 ...
- 矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...
- 如何在代码里添加并使用阿里巴巴矢量图标-iconfont，在此常用有三种引入方法
iconfont-阿里巴巴矢量图库 在登录好账号的前提下进行以下操作: 添加icon: 首先搜索你想要的icon名,比如:首页 选好你想要的图--加入购物车--添加至项目(没有项目的话可以新建项目,如 ...
- vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构 本地document文 ...
- 如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
- 【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
前言 为什么要使用阿里图标库: 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标,主要原 ...
- iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
- vue项目引入彩色iconfont图标
做项目的时候经常会使用到iconfont图标库,在项目开始的时候提前想好需要什么图标,最好是多下载几个可替换的同类型图标,宁滥勿缺(别问,问就是得到了教训),无色的还是彩色的,这点很重要. 首先了解一 ...
最新文章
- 很遗憾，自然语言理解是AI尚未攻克的领域
- 【 English 】程序员必备单词
- android内存不足,Android OutOfMemoryError：内存不足问题的排查与解决
- 《编程珠玑（第2版•修订版）》—第2章2.5节原理
- 小米答题题库_拼多多果园答题题库74（每日更新）
- layui 表单动态添加、删除input框
- 虚拟服务器e,虚拟主机服务器E
- spl_autoload_register 注册自己的自动加载函数(__autoload())
- 【Hbase】HBase分布式安装
- 基于Yarn的Spark环境，统计哈姆雷特词频(1)
- 如何成为一个优秀的测试工程师？必备的9大职业素质盘点
- Mysql之事务与视图
- linux sh 按键精灵,按键精灵脚本代码教程
- dasBlog-1.8.5223.1中文版
- 计算机二级河南2020年12月报名时间,2020年3月河南省洛阳市计算机二级报名时间|网上报名入口【12月16日9：00开通】...
- 【课程·研】工程伦理学 | 课堂汇报：个性化推荐技术的伦理学——以平台广告精准投放事件为例
- 如何选择适合你的兴趣爱好（二十七），外语
- Cocos Creator 微信小游戏排行榜
- 项目管理中如何制定项目目标
- 【TPU和GPU，谁将一统AI芯片】摩尔定律之后一万倍，10万+热文引爆激辩