阿里icon使用fontclass

最新推荐文章于 2025-05-22 10:33:08 发布
原创 最新推荐文章于 2025-05-22 10:33:08 发布 · 3.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#unicode #@font-face #icon

本文介绍了如何通过百度阿里的图标库找到所需的icon，并将其添加到购物车，再将这些icon应用到自己的项目中，包括登录、下载及文件的管理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.百度阿里专业icon也可以直接点击，进入

2.搜索自己需要的icon加入购物车

 

3.然后将icon添加至以创建的项目方便后续更细（添加前需要登陆github或者微博）

4.选择好之后会跳转至该页面，下载至本地即可

5.下载后可以看到下图文件，复制图中所示的5个文件到新建的font文件夹下

6.其实这个解压后的文件非常全，可以模仿他的写法去写自己要的模式，这里用fontclass做例子。

 

 

 

 

 

引入阿里icon库的方法（font-class 引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-15 7696
另外，建议在使用阿里矢量图标库前仔细阅读相关文档和许可证，确保符合相关要求和规定。想要让全局都能使用这些图标，还需要在app.wxss文件中引入这个iconFont.wxss文件。下载阿里矢量图标库文件：可以从阿里官网或其他可靠来源下载阿里的矢量图标库文件，通常是以。解压缩文件：将下载的阿里矢量图标库文件解压缩到本地目录中，得到一系列图标文件（通常是。所以，在class中粘贴对应图标的类名，就能在页面中看到对应的图标了。选择自己想要的图标，添加到购物车，选择【添加至项目】是阿里矢量图标库中对应图标的类名。
nut-ui组件库icon中使用阿里图标
阿乐的博客
03-12 1132
但是很多组件库中并找不到我们需要的图标 这时候 大家有可能会找图标库 最大众的就是iconfont的图标了。下载以后是这样的文件夹 最重要的是 iconfont.css 这个文件夹。有很多方式去使用这个东西 比如将再限链接中的css引入 在使用。基本每个移动端组件库都有组件 icon组件 图标组件、我使用的是iconfont组件库中的icon 组件。symbol 方式 等.............①进入iconfont选择图标。这中叫做 自定义图标。
iconfont图标Font class使用
weixin_45866961的博客
05-11 277
阿里巴巴矢量图iconfont图标Font class使用
阿里字体图标库iconfont的使用详解
qq_46234563的博客
03-21 3785
阿里字体图标库iconfont的使用详解
阿里矢量图标Iconfont详细使用教程
最新发布
m0_61998604的博客
05-22 1864
Iconfont是阿里巴巴推出的矢量图标管理平台，提供丰富的图标资源，支持多种格式和技术栈，便于在网页或应用中使用。主要特点包括：丰富的图标库、易于集成、团队协作、个性化定制和API支持。使用前需注册登录，搜索并添加图标到项目，生成代码链接。使用方式包括直接下载、Unicode引用、Font-class引用和Symbol引用，其中Symbol引用支持多色图标，是未来主流。通过封装React组件，可以更方便地使用图标。
iconfont的Unicode和Font class使用方法
weixin_64388392的博客
11-13 2379
阿里巴巴矢量图标库——iconfont的Unicode和Font class两种使用方式
iView-admin2.0脚手架无法使用阿里iconfont的font class的解决办法
前端一线搬运工的博客
11-16 368
按照官方文档引入无显示, 查看html发现<iconstype="mm"/>是编译成<i class="iconfont icon-mm" style="font-size: 16px; color: rgb(92, 107, 119);"></i> 文档地址:https://lison16.github.io/iview-admin-doc/#/icons 原因是因为新建的iconfont前缀默认是icon没有横杠(默认) 为了适配iView-adm...
微信小程序中使用自定义图标（阿里icon）的方法
10-18
总结来说，在微信小程序中使用自定义图标（如阿里云图标字体）涉及到引入字体文件、设置和使用@font-face规则以及利用CSS样式展示图标等技术环节。通过理解这些知识点，开发者可以有效地在微信小程序中展示丰富的...
font icon 使用教程
02-19
- 首先，你需要一个Font Icon库，例如Iconfont（阿里巴巴图标库）。在这个库中，你可以选择或上传自己的图标，生成对应的字体文件和CSS代码。 3. **引入字体文件** 将`iconfont.css`文件引入到你的HTML文档中，...
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
[class^='icon-'], [class*=' icon-']
wo_sxn的博客
12-21 5204
问题前言 练习vue项目开发的时候，观看她人写的项目中css语法，发现了如下写法： [class^=&quot;icon-&quot;], [class*=&quot; icon-&quot;] { .font-s2; float: left; margin-left: -1.5rem; margin-right: .5rem; margin-top: .1rem; width: 1em; } ...
阿里矢量图标库
04-26
阿里矢量图标库
Icon class生成器（Python）
FreeMing-imduingui0
12-22 1544
Icon class生成器（Python）先说起因，项目中有很多图标，需要把美工给的三种尺寸的png加工成class来用，这样的好处就不必说了。但是图标数量比较大，以后换肤的时候，更是纯搬砖的活，写了个脚本来解放一下以后写icon的class的搬运工。搬砖步骤： 所有的icon的一倍图片，与本脚本放到一起（全部英文命名）图片命名与class一致,对应三种尺寸标记为1,2,3号.所有图片存储位置为:s
iconfont的用法
FYSGXFZ的博客
07-11 2508
1.进入该网站：http://www.iconfont.cn/2.进入图标库，搜索自己想要的图标。3.以箭头为例，搜索进入该界面，找到自己想要的箭头。4.添加进库：5.库内图标个数会在界面有所显示，然后点进去。6.添加到项目,点击确定，会自动跳入到另一个界面。跳转到：7.记下箭头名称，这里是:icon-jiantouarrow493：8.点击下载至本地，会自动下载该压缩包：9.解压。10.应用(只...
icon 图标 动态切换（上传 或者本身就有icon也就是class）
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
01-12 1457
一共三种情况 为空 用户上传的svg 也就是以http开头的图标 本身存在的svg 也就是 像el-icon-plus一样的样式 <el-upload class="upload" :action="fileurl" :show-file-list="false" :on-success="handleAvatarSucceis" :before-upload="beforeAvatarUpload" accept=".svg" :on-error="fileerror".
怎么以font-class的方式引用阿里图标库
听海边涛声
05-23 410
怎么以font-class的方式引用阿里图标库
IE8-阿里icon字体引用不显示的问题
alanshige的博客
06-18 627
IE8-阿里icon字体引用不显示的问题
阿里图标库使用font class 写法和unicode引用，简单，使用快捷
Bad_Shepherd的博客
02-12 3738
主要介绍 font class 写法，这种写法使用简单 直接开始吧 使用步骤 1.打开阿里图标库的官网：https://www.iconfont.cn/ 2.直接搜索想找的图标，比如购物车 有时会弹出一些教程，点了就行，会出来这么多图标。 3.选择好图标，然后加入购物车，这里要注意的是，如果做实际的项目时，肯定会用到多个图标，这时候，需要一次性加入。不然会导致一些问题。 加入完成之后可...
动态绑定阿里图标库图标
weixin_45020094的博客
07-06 459
如果还不知道怎么在vue中怎么引入阿里图标库的，可以看我原来的文章 正文开始 首先把阿里图标库的class 添加到data数据中 遍历数据的时候动态绑定class 效果
vue3 中使用阿里巴巴的icon
12-27
### 集成和使用阿里巴巴 Iconfont 图标 为了在 Vue3 项目中集成并使用阿里巴巴 Iconfont 图标，需遵循特定步骤来确保图标能够正常显示。 #### 安装依赖项 首先，在本地环境中安装 `@ant-design/icons-vue` 或者其他必要的包以便于后续操作。虽然这不是必需的一步，但对于某些高级功能来说可能是有用的。 #### 获取图标链接 访问 [https://www.iconfont.cn/](https://www.iconfont.cn/) 并完成注册与登录过程[^2]。创建一个新的项目或选择现有项目后，获取到用于引入图标的 `<link>` 标签代码片段。 #### 引入全局样式文件 将上述获得的 `<link>` 标签放置于项目的公共 HTML 文件（通常是 `public/index.html`）中的 `<head>` 部分内： ```html <link rel="stylesheet" href="//at.alicdn.com/t/font_8d9sbz7j.css"> ``` 这会使得整个应用都可以访问这些字体资源而无需单独导入每个组件。 #### 使用单个图标作为 Web 字体形式 对于简单的场景可以直接通过类名方式调用所需图标: ```vue <template> <div class="aa">舆情管理页面 <div class="iconfont icon-daohang_jifen-xuanzhong"></div> <!-- 这里直接用了class --> </div> </template> <script setup lang="ts"> // 不需要额外import语句因为已经全局加载了css </script> <style scoped></style> ``` 这种方式适用于大多数情况下的静态展示需求[^1]。 #### 动态绑定 Class 名称 当希望动态改变所使用的具体哪个图标时可以采用如下方法： ```vue <template> <div class="aa">舆情管理页面 <i :class="[prefixCls, className]" /> </div> </template> <script setup lang="ts"> const prefixCls = 'iconfont'; const className = computed(() => { return props.type ? `${props.type}` : ''; }); </script> <style scoped></style> ``` 此模式允许父级传递不同的 `type` 属性从而实现灵活切换不同类型的图标。 #### SVG 彩色图标支持 如果想要利用更高质量且色彩丰富的SVG版本，则应按照官方文档说明下载对应格式的数据，并将其转换为适合前端使用的格式。之后可以通过以下方式进行渲染： ```vue <template> <div class="aa">舆情管理页面 <svg class="icon icon-back" aria-hidden="true"> <use xlink:href="#icon-back"></use> </svg> </div> </template> <script setup lang="ts"> // 同样不需要特别处理只要保证对应的symbol定义存在即可 </script> <style scoped></style> ``` 注意这里假设已经在HTML头部包含了正确的外部CSS/SVG Sprite Sheet引用[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值