iconfont-阿里巴巴矢量图标库使用教程

已于 2022-04-18 16:15:17 修改
阅读量1.1w 收藏 33
点赞数 5
分类专栏： Web前端技术基础 文章标签： 前端 css html5 网页设计 web
于 2021-12-27 18:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49488584/article/details/122162922
版权

iconfont-阿里巴巴矢量图标库使用教程

文章目录

一、前言

  1. 图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要是两倍尺寸的，这对于设计师来说，成本太大（虽然这是趋势）。

  2. 让样式回归CSS具体而言，就是指使用iconfont后，因为图标就是字体。我们可以用CSS来灵活控制图标的大小、颜色、阴影等。传统的 CSS Sprites 我们只能重新设计后再「切图」，虽然现在有很多自动拼合工具，但是依然繁琐。进一步的，如果不用兼容IE6-7后，我们完全可以用CSS伪元素来生成图标。也就是说假如图标编码改变了，不用再改动HTML中的编码，只用修改 content 中的编码，达到真正目的上的CSS来控制图标。

  3. 图标规范化通过iconfont平台，我们可以高效快速的生产出规范的图标。现在可以直接通过平台上传SVG或ESP文件，就可以转换成字体图标了。

  4. 自动上传到阿里云CDN通过平台生成的字体，自动存储到阿里云CDN，免费加速。

  5. 流量最小化在移动设备，节约流量是我们前端把控用户体验关键而又容易忽视的一个环节。通常一个项目中，我们并不需要一套大而全图标库，也许我只是需要其中的一个关闭按钮(o)/~。通过平台可以点选自己需要的图标，重新生成一份字体，减少字体体积，节约流量的同时带来更快的加载速度。

二、使用步骤

1.打开iconfont-阿里巴巴矢量图标库，搜索图标，选择合适的图标批量加入购物车(如果是单个矢量图直接下载也可以)
在这里插入图片描述

2.在右侧点击购物车

image-20211226204901441

3.在购物车中，推荐是使用添加项目，在账户内新建一个项目下次使用的时候，方便下载。这里我们用作HTML开发所以点击下载代码。(下载素材是用于SVG、AI、PNG的）
在这里插入图片描述

4.下载项目需要的矢量图，第三步点击下载代码可以跳过这步。

在这里插入图片描述

5.将下载好的压缩包解压，以下文件全部导入HTML项目下css文件中

image-20211226205658807

7.在iconfont.css中可以设置图标的样式，这里我默认，一般不作修改。

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

如果想单独修改某个图标的大小样式，可以为span标签单独设置一个class

.iconfont2 {
	font-family: "iconfont" !important;
	font-size: 160px;
	font-style: normal;
	color: #BD2C00;
	background-color: #B3D4FC;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

8.在HTML文件中，第六行导入刚刚下载的iconfont.css,第九行挑选相应图标并获取字体编码，应用于页面
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/iconfont.css">
	</head>
	<body>
		<span class="iconfont">&#xe71c;</span>
		<span class="iconfont2">&#xe606;</span>
		<span class="iconfont">&#xe645;</span>
		<span class="iconfont">&#xe609;</span>
	</body>
</html>

三、运行效果

image-20211226222451718

张时贰
关注
  • 5
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HCIP Datacom学习笔记
04-18
此文件为HCIP路由交换学习笔记，内容详细
iconfont-阿里巴巴矢量图标库的食用方式
qq_71654538的博客
03-12 313
本人在最近的学习过程中，发现了一个方便好用的iconfont-阿里巴巴矢量图标库，它在一定程度上解决了我素材的烦恼，现将其食用方法进行介绍。本文主要介绍图标的食用方法，字体请读着自行探索。
阿里巴巴 HTML 图标大全 使用详解
m0_61743947的博客
06-15 1718
网页图标的下载与使用
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 1083
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
前端页面 使用iconfont阿里巴巴线上矢量图标
2201_75357417的博客
08-23 173
回到iconfont项目里，选择一个图标，鼠标放在图标上，在font-class类型下，点击“复制代码”，然后在我们的页面中写一个或者其他标签，在添加class属性，属性值为class=“iconfont icon-xxxx”，iconfont一定要带上，第二个class就是我们刚刚复制的图标的class。每次添加完新的图标之后，记得点击本步骤中第一张图的 “更新代码”，然后重新赋值到页面中去引入，新的链接中会包含iconfont项目中添加的所有图标，所以不会影响原先图标的使用。
引入阿里iconfont图标方法以及注意事项
tuonioooo
12-27 9837
背景在我们做日常项目时，通常会用到icon图标或者是一些图标字体，阿里iconfont是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式iconfont新建项目官网：https://www.iconfont.cn/   在首页选择【图标管理】-【我的项目】点击 【我的项目】填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。添加图标新建好项目后，找到自己想要的图标
教你如何跨越iconfont彩色图标40个个数限制
qq_36765732的博客
10-25 1004
跨越iconfont彩色图标40个个数限制
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
seeeeeeeeeee的博客
11-28 4630
为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显
阿里iconfont使用方法
QW's Blog
02-14 6872
阿里巴巴iconfont的使用方式分为两种： 本地使用 线上引用 iconfont-阿里巴巴矢量图标库 0.前期准备 使用时先到网站上选中需要使用的图标添加至项目 1.本地使用 1.下载项目至本地 2.解压到项目中 3.在页面中引入样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
阿里巴巴矢量图标库 iconfont 的使用方法
飞飞程序员
04-29 4611
xx-blog主题使用的图标库是阿里巴巴的iconfont，因此这里介绍一下此主题库的用法。 首先去iconfont主题库，注册一个账号，然后就可以找自己喜欢的图标了，找到后点击添加购物车，就会到了右侧的购物车中，然后去个人中心下载即可。
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
欢迎来到长风沛雨的博客
05-12 6708
三种方式在HTML文件内引入阿里巴巴iconfont字体图标....
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
weixin_44867717的博客
04-08 6520
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式 一、下载图标 1、先进入iconfont.cn页面 iconfont官网：https://www.iconfont.cn/ 2、登陆，并选择你要用的图标进行下载 3、点击下载，并选择弹框下面的色值和大小，点击svg下载，并进行重命名 1-浅灰正常图标 2-明蓝高亮图标 4、把下载的svg图标，放进本地项目里的某个文件夹，进行使用 二、使用图标 1、找到所需界面的html代码 2、在HTML中插入css文件 3、 在html里面插入一
阿里巴巴 矢量图 流程图 json 格式
08-17
https://www.iconfont.cn/ 阿里巴巴 矢量图 https://app.diagrams.net/ 流程图 https://tool.jisuapi.com/json.html json 格式
Draw.io用阿里云3D矢量图标库-2022大数据
06-19
Draw.io用阿里云3D矢量图标库-2022大数据，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制](https://blog.csdn.net/weixin_44479533/article/details/131289488)
阿里矢量图标库WPF使用Demo
12-27
iconfont_阿里矢量图标库WPF使用Demo，我发现网上没有详细的WPF使用示例，便做了一个简单的示例给大家参考。
CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
11-21
进入阿里巴巴矢量图标库 阿里巴巴矢量图标库 选择喜欢的图标的，点击添加到库 选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录） 然后在右侧中点击添加至项目 之后在个人主页中可以...
微信小程序引用阿里巴巴矢量图标.zip
09-04
微信小程序引用阿里巴巴矢量图标库，单个矢量图标引入
vue和小程序项目中使用iconfont的方法
01-19
1、百度搜索iconfont或者阿里巴巴矢量图标库官网，注册登录； 2、找到图标管理->新建项目，或者使用已有的项目，用于保存自己的图标； 3、搜索自己需要的icon； 4、添加到购物车中； 5、购物车中就有了相应...
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
最新发布
宅斗士的博客
04-23 368
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
使用 阿里巴巴矢量图标库
08-13
要在Uni-app中使用阿里巴巴矢量图标库，可以按照以下步骤进行： 1. 注册并登录阿里巴巴矢量图标库（https://www.iconfont.cn/）的账号。 2. 在阿里巴巴矢量图标库中搜索需要的图标，选择并添加到自己的项目中。 3. 在项目中创建一个字体图标库文件夹，将从阿里巴巴矢量图标库下载的字体文件（通常是.ttf或.otf格式）放入该文件夹中。 4. 在项目的`index.html`文件中，通过`<style>`标签引入字体图标库，并设置其`font-family`属性。例如： ```html <style> @font-face { font-family: 'iconfont'; src: url('path/to/iconfont.ttf') format('truetype'); } </style> ``` 5. 在需要使用字体图标的地方，使用`<text>`或其他合适的组件，并设置`class`属性为图标对应的类名。例如： ```html <text class="iconfont icon"></text> ``` 在上面的代码中，`iconfont` 是字体图标库的类名，`` 是具体的图标字符码点。 6. 根据需要设置图标的样式，如颜色、大小等。可以通过内联样式或CSS类来实现。 请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。 希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值