iconfont矢量图标使用

原创 已于 2023-02-09 21:57:18 修改 · 255 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #css

于 2023-02-09 21:51:52 首次发布
文章介绍了将iconfont.css文件引入项目的方法，包括下载解压、放置文件、修改css内容以及处理显示异常的问题，特别是检查font-face的路径和类名的准确性。

1.在线地址

加入购物车
在这里插入图片描述
点击购物车，加入项目（需要登录）
在这里插入图片描述
查看项目
在这里插入图片描述

选择font-class方式并下载
在这里插入图片描述
解压得到下列文件，将iconfont.css文件放到项目对应目录下（我放在common文件夹下）
在这里插入图片描述
在这里插入图片描述
css文件内容
在这里插入图片描述
点击链接，打开新的页面，获取对应内容
在这里插入图片描述
将框框中的内容复制到css文件里面
在这里插入图片描述
在这里插入图片描述
添加删除图标，链接地址会改变，要及时更换css信息（@font-face里面的路径，和添加/删除对应的图标样式类）
在这里插入图片描述
项目中使用
在APP.vue里面引入css文件
在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述
如果出现小方框的情况，注意看css文中@font-face里面的那几个路径是否正确，还有类名是否正确

Vue使用alibaba的iconfont矢量图标
泡泡的博客
11-30 1340
Vue引入并使用alibaba阿里巴巴的iconfont矢量图标
如何使用IconFont？——矢量图标
IT修真院：初学者转行到互联网的聚集地
05-20 4191
这里是修真院前端小课堂，本篇分析的主题是 【如何使用IconFont？——矢量图标】 每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【如何使用IconFont？——矢量图标】 1.背景介绍 网上的一些小图标除了可以使用css精灵图制作外，还可以使用现在比较热门的...
iconfont图标引入
weixin_45274554的博客
08-07 362
字体图标 字体图标库使用webFont原理，加载一个图标就像加载一个字体一样，通过控制字体大小、字体颜色来控制图标的大小与颜色。 目前比较流行的开源字体图标库有 iconfont http://www.iconfont.cn/ font-awesome http://fontawesome.dashgame.com/ iconfont使用步骤 打开iconfont网站 https://www.iconfont.cn/ 搜索要使用的图标 将喜欢的图标加入
iconfont图标引入方式
weixin_43022630的博客
05-09 457
iconfont图标引入 矢量图标网址 https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3382781 注册登录 搜索图标 鼠标悬浮添加购物车 点击购物车按钮 点击’添加至项目’按钮 点击’下载至本地’ 解压文件，打开demo_index.html，查看使用方法 html文件中<head></head>标签中引入iconfont.css文件 <link rel="stylesh
jquery+iconfont实现星星评分功能
东方雨林_Lin的博客
08-17 1407
此处使用了confront的图标，用.js_star类名来触发click（）事件。.inconfont-coor为confront图标赋予了颜色（黄色），每次点击星星时第一次js循环会把所有星星的颜色都去掉，然后第二次循环会再次将颜色赋值给点到的那个星星以及它前面所有的星星。 /*HTML代码*/ &lt;div class="js_star"&gt; &lt;i class="icon...
iconfont图标引入方法
DESERTo的博客
12-09 2250
iconfont细节使用
自定义图标iconfont
weixin_43738272的博客
03-10 900
阿里iconfont的使用 ui切好图上传到蓝狐，我们下载svg格式的图片。 登陆iconfont官网 然后将自己取的iconfont的昵称也就是用户名给你们负责人说，叫他把你拉入图标管理库，这样才能共同开发，全部人各自定义自己的图标，不冲突。 被拉入库之后 hover导航栏的图标管理库点击我的项目 我参与的项目就是你们公司的项目 开始自定义icon 点击上传图标致项目 ...
Web-前端html+css从入门到精通 156. iconfont矢量图标库.zip
05-23
iconfont矢量图标库”将深入讲解如何使用Iconfont来创建和应用矢量图标。 首先，理解HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）的基本概念至关重要。HTML是用于创建网页结构的语言，包括...
iconfont矢量图标库使用方法详解
iconfont 是阿里巴巴推出的一款非常实用的矢量图标库工具，广泛应用于前端开发和UI设计中。它不仅提供了海量高质量、可缩放、无损清晰度的矢量图标资源，还支持用户自定义图标项目、在线生成字体文件以及便捷地嵌入...
Iconfont矢量图标库使用教程与集成指南
Iconfont 是阿里巴巴推出的一款非常实用的矢量图标库平台，广泛应用于前端开发、UI设计以及各类 Web 项目中。它为开发者和设计师提供了一个集中管理、自由选择并高效引入矢量图标的解决方案。本文围绕标题《Iconfont...
在html中引入iconfont图标
qq_39355295的博客
04-26 8880
最近练习前端页面的渲染，加强一下自己的html与css技术，其中就涉及到引入图标的问题。这里我主要演示一下引入iconfont-阿里巴巴图标：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 网站搜素想要的图标： 选择自己中意的图标，鼠标放在图标上面，如果只是想要图片的话，选择下载，然后在图标下载页面，选择对应的...
iconfont引入方法
XUYANBOYA的博客
07-19 4691
step 1:找到阿里巴巴矢量图标库官网https://www.iconfont.cn,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点击新建项目,用于保存自己常用的图标; step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车; 我现在将第一个安卓图标加入我的项目,点击加入购物车 step 4:添加到购物车完成后,购物车徽章数字应该显示.
最简易的iconfont的使用方法
guanguan0_0的博客
07-04 2358
先贴上阿里巴巴矢量图标的地址：http://www.iconfont.cn/具体使用步骤：1、登录网站2、寻找适合的图标加入购物车：加入购物车的图标会被虚线选中 3、点击页面右上角的购物车图标，可以看到刚刚加入购物车的图标信息，然后点击“添加至项目”，从项目列表中选择项目或是新建项目4、有两种使用方法，一种是在线使用，一种是下载后使用，建议在项目开始时在线使用...
前端如何在项目中使用iconfont
luckydog
03-19 4066
如何在项目中使用iconfnot-----http://www.iconfont.cn/1、打开官网 ，登录注册的就不用说了.2、将你需要的图标点击购物车按钮3、选好以后计入我的购物车中4、点击下载代码（下载后是一个压缩包，默认名为download.zip）5、解压压缩包，会有好几个文件，html文件为iconfont图标引用说明包括（unicode引用、symbol引用、font-class引用...
日期时间选择器——el-date-picker设置默认时间
热门推荐
h_jQuery的博客
08-03 1万+
组件使用
文件上传——将文件转成base64传给后端
h_jQuery的博客
10-25 5556
文件上传转base64
js原生——搜索框，模糊匹配（查询）
h_jQuery的博客
07-09 4407
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
js处理——获取当前月第一天和最后一天
h_jQuery的博客
12-29 3354
js时间处理
javascript——数组、数组遍历、forEach、增加删除元素
h_jQuery的博客
08-10 2687
数组(Array) 数组也是一个对象，它和普通对象的功能类似，也是用来存储数据的；不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素的 对象中是用属性，数组中用索引 索引：数组的索引是从0开始的整数，数组的存储性能比普通对象更好，在开发中我们经常使用数组来存储一些数据 <script> // 创建数组对象 var arr = new Array(); // 使用typeof检查数组时，会返回object /
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值