iconfont矢量图标使用

已于 2023-02-09 21:57:18 修改
阅读量156 收藏
点赞数
分类专栏： javascript es6 uniapp 文章标签： 前端 javascript css
于 2023-02-09 21:51:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_jQuery/article/details/128960460
版权
javascript 同时被 3 个专栏收录
123 篇文章 0 订阅
订阅专栏
es6
73 篇文章 0 订阅
订阅专栏
uniapp
2 篇文章 0 订阅
订阅专栏

1.在线地址

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

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

h_jQuery
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义图标iconfont
weixin_43738272的博客
03-10 792
阿里iconfont的使用 ui切好图上传到蓝狐，我们下载svg格式的图片。 登陆iconfont官网 然后将自己取的iconfont的昵称也就是用户名给你们负责人说，叫他把你拉入图标管理库，这样才能共同开发，全部人各自定义自己的图标，不冲突。 被拉入库之后 hover导航栏的图标管理库点击我的项目 我参与的项目就是你们公司的项目 开始自定义icon 点击上传图标致项目 ...
iconfont图标引入
weixin_45274554的博客
08-07 280
字体图标 字体图标库使用webFont原理，加载一个图标就像加载一个字体一样，通过控制字体大小、字体颜色来控制图标的大小与颜色。 目前比较流行的开源字体图标库有 iconfont http://www.iconfont.cn/ font-awesome http://fontawesome.dashgame.com/ iconfont使用步骤 打开iconfont网站 https://www.iconfont.cn/ 搜索要使用的图标 将喜欢的图标加入
iconfont图标引入方式
weixin_43022630的博客
05-09 370
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 1312
此处使用了confront的图标，用.js_star类名来触发click（）事件。.inconfont-coor为confront图标赋予了颜色（黄色），每次点击星星时第一次js循环会把所有星星的颜色都去掉，然后第二次循环会再次将颜色赋值给点到的那个星星以及它前面所有的星星。 /*HTML代码*/ &lt;div class="js_star"&gt; &lt;i class="icon...
iconfont图标引入方法
DESERTo的博客
12-09 2027
iconfont细节使用
使用iconfont图标
11-16
1. **选择和下载iconfont库**：首先，你需要在网站如阿里巴巴矢量图标库（https://www.iconfont.cn/）上选择或定制你需要的图标，并将其下载为`.ttf`或`.otf`的字体文件。 2. **集成到项目中**：将下载的字体文件...
iOS中如何使用iconfont图标实例详解
08-27
Iconfont是一种流行的方法，允许开发者像使用字体一样使用图标，从而简化图标管理并提高性能。本文将深入探讨如何在iOS中使用Iconfont，包括其概念、优势以及具体的应用步骤。 1. 什么是Iconfont？ Iconfont，...
Web-前端html+css从入门到精通 156. iconfont矢量图标库.zip
05-23
iconfont矢量图标库”将深入讲解如何使用Iconfont来创建和应用矢量图标。 首先，理解HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）的基本概念至关重要。HTML是用于创建网页结构的语言，包括...
iconfont字体图标.pdf
06-27
（5）矢量性：图标是矢量的，与像素无关。缩放图标不会影响清晰度。 （6）兼容性：字体图标支持所有现代浏览器（包括IE6）。 （7）本地使用：通过添加定制字体到你的本地系统，你可以在各种不同的设计和编辑应用程序...
iconfont小图标
08-16
Iconfont是中国非常知名的一款矢量图标库，由阿里巴巴体验团队精心设计并维护...总的来说，Iconfont是设计和开发领域中一个宝贵的资源，它简化了图标使用的流程，提高了设计质量，值得每一个设计者和开发者掌握和使用。
在html中引入iconfont图标
qq_39355295的博客
04-26 8560
最近练习前端页面的渲染，加强一下自己的html与css技术，其中就涉及到引入图标的问题。这里我主要演示一下引入iconfont-阿里巴巴图标：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 网站搜素想要的图标： 选择自己中意的图标，鼠标放在图标上面，如果只是想要图片的话，选择下载，然后在图标下载页面，选择对应的...
iconfont引入方法
XUYANBOYA的博客
07-19 4528
step 1:找到阿里巴巴矢量图标库官网https://www.iconfont.cn,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点击新建项目,用于保存自己常用的图标; step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车; 我现在将第一个安卓图标加入我的项目,点击加入购物车 step 4:添加到购物车完成后,购物车徽章数字应该显示.
最简易的iconfont的使用方法
guanguan0_0的博客
07-04 2270
先贴上阿里巴巴矢量图标的地址：http://www.iconfont.cn/具体使用步骤：1、登录网站2、寻找适合的图标加入购物车：加入购物车的图标会被虚线选中 3、点击页面右上角的购物车图标，可以看到刚刚加入购物车的图标信息，然后点击“添加至项目”，从项目列表中选择项目或是新建项目4、有两种使用方法，一种是在线使用，一种是下载后使用，建议在项目开始时在线使用...
日期时间选择器——el-date-picker设置默认时间
热门推荐
h_jQuery的博客
08-03 1万+
组件使用
文件上传——将文件转成base64传给后端
h_jQuery的博客
10-25 4144
文件上传转base64
js原生——搜索框，模糊匹配（查询）
h_jQuery的博客
07-09 3976
<!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 2883
js时间处理
javascript——数组、数组遍历、forEach、增加删除元素
h_jQuery的博客
08-10 2237
数组(Array) 数组也是一个对象，它和普通对象的功能类似，也是用来存储数据的；不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素的 对象中是用属性，数组中用索引 索引：数组的索引是从0开始的整数，数组的存储性能比普通对象更好，在开发中我们经常使用数组来存储一些数据 <script> // 创建数组对象 var arr = new Array(); // 使用typeof检查数组时，会返回object /
iconfont发展历程：矢量图标解决方案探析
"iconfont是阿里巴巴一淘团队开发的全平台图标使用解决方案，它基于矢量字体技术，解决了图标在不同平台、不同尺寸设备上清晰显示、管理和使用的问题。随着移动平台的兴起，特别是iPhone4的视网膜屏幕，矢量图形的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值