iconfont 图标 使用

最新推荐文章于 2024-06-20 13:56:26 发布
最新推荐文章于 2024-06-20 13:56:26 发布
阅读量323 收藏 1
点赞数 1
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruantianqing/article/details/113095463
版权

1 可以使用在线连接，也可以下载到本地

请添加图片描述

2 在线连接

  • 在assets下的font文件夹下新建iconfont.css文件夹，引入在线链继
    在这里插入图片描述
  • 在main.js文件中引入iconfont.css文件
    请添加图片描述

3 下载文件

下载到本地后，把压缩包里的css文件拖到assets下的font文件夹下，然后在main.js中引入

4使用

<i class="iconfont icon-shouqi"></i>

在这里插入图片描述
写上图标对应的类名就可以使用了

注意：每次更新图标的时候都要更换在线连接或者重新下载css文件
ruantianqing
关注
专栏目录
使用iconfont图标
11-16
标题“使用iconfont图标”和描述中提到的方法，是将图标设计成字体形式，这样可以有效地降低资源占用，同时提供更灵活的大小调整和颜色变换。 `iconfont`是一种将矢量图形转化为字体文件的技术，它允许开发者通过...
vue+echarts项目十二：使用webSocket优化项目：合并图表到一个页面并添加 切换主题和切换全屏功能
benlalagang的博客
09-30 1315
讲之前所写的图表整合到一个页面上、并且添加 主题切换和 单项全屏切换的功能
数据可视化项目---Go+平台实时监控系统(完结)
liudachu的博客
11-07 1679
单独组件开发： 数据可视化项目—售票员业绩排行 数据可视化项目—客源分析趋势图 数据可视化项目—客源分布图 数据可视化项目—地区销量排行 数据可视化项目—订单分类占比图 数据可视化项目—车辆实时信息图 在完成单独组件开发之后，进行项目的最后一个步骤：合并组件、添加全屏功能、主题切换功能 最终效果如下 组件完整代码 ScreenPage.vue <template> <div class="screen-container" :style="containerStyle">
iconfont介绍及基本使用
热门推荐
07-26 4万+
在看别人 github 项目的时候，看到了 iconfont，百度了一下是阿里的图标库，这个很容易理解，但是自己操作一遍之后发现下载下来的目录还包含了 .eot、.woff 等文件，对于这些新东西感到有些陌生，在经过一番查找之后有所得，整理思路，记录于此。 一、Iconfont 1. 概述 在前端作业中，二十年前只有页面中铺满文字就算上线产品，现如今，不加点俏皮的“图标”会让页面显得很 Low 很 Low。 图标 在写这篇文章之前，我一直以为上图中的“图标”是一个个的图片组成，但学习总是给.
iconfont使用详细步骤
前端小白成长记
11-25 7086
1、使用说明：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code 2、查找具体想要的icon图标 3、查找到需要的图标后，点击下载按钮，进入下载页面 如果单张下载的话，可以直接点击最下方那排，选择自己想要下载的格式。 如果想要将这个图标库所有图标都下载下来，可以点击右侧的图标库。 4、下载多个图标 将想要下载的图片加入购物车，然后点击购物车，可以一起.
vue在结构中绑定动态class,实现三元表达式切换不同class
m0_57005111的博客
06-20 189
【代码】vue在结构中绑定动态class,实现三元表达式切换不同class。
IconFont图标提取器htm2svg-1.0.8.6.zip
10-22
在使用IconFont图标提取器之前，了解IconFont的概念是必要的。IconFont是一种将图标设计成字体库的方法，通过CSS控制字体大小、颜色等属性，使得图标能够适应各种屏幕尺寸和分辨率，便于前端开发者使用。IconFont...
iconfont图标字体的六种使用方式
最新发布
07-21
### iconfont图标字体的六种使用方式 #### 一、概述 在当今互联网时代，图标字体作为一种高效且灵活的设计元素，在网页设计与UI界面中扮演着越来越重要的角色。iconfont作为阿里巴巴矢量图库，提供了丰富的图标...
webpack中使用iconfont字体图标的方法
08-27
本文将详细介绍如何在 Webpack 环境下使用 Iconfont 字体图标。 Iconfont 是一种流行的方法，它允许开发者通过 CSS 来使用图标，而不是传统的图像格式。这样可以提高页面加载速度，同时更容易进行样式调整。然而，...
iconfont图标使用教程
weixin_64161321的博客
06-15 2106
都可以），但是切记如果你使用了在线链接，则必须在网站上更新在线链接，然后将该链接更新到你的项目中，如果你是本地使用，则必须下载最新的代码，然后更新到你的项目中，否则修改无效。这是一种全新的使用方式，应该说这才是未来的主流，也是阿里矢量图标库平台目前推荐的用法，但是在前端，新技术要向老设备看齐，所以你懂得。需要注意的是，如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的。中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看。
iconfont的N种使用方法
weixin_44042442的博客
12-02 1万+
icon-font的使用方法 为什么icon font是一个方形的框 图标不显示
字体图标-iconfont的使用方法共几种
weixin_43273592的博客
03-06 537
字体图标-iconfont的使用方法
为什么要使用字体图标iconfont？
关中刀客在青岛
08-28 1169
上家公司时使用过字体图标，优势明显，现推广给当前公司的同事使用，文章记录如下(以react为例)： 引入字体图标iconfont可以提高开发效率和项目的可维护性。 优点 设计不用再切图了，更不需要针对不同场景切出大小、颜色、格式等不同的图片，只需维护一个图标项目库即可。 开发者也不用引用大量图片，也不需要在js中根据不同场景切换不同图片，仅class名就可搞定，修改灵活。尤其在node开发中，节省大量代码，提高可维护性。 字体图标缩放不失真，不会变模糊。 减少网络请求次数，一个css文件可包.
前端引入iconfont矢量图标详细步骤（图文）
G_matinal的博客
02-03 2411
我们在编写网页的时候，为了防止加载过多的图片导致网页加载缓慢的问题，从而需要引入一部分矢量图标库里面的图标来进行操作，这里主要的为大家展示国内阿里巴巴矢量图标库的使用教程。
IconFont使用方式简介
qq_45327886的博客
03-02 2万+
Iconfont在线和本地引入方式简介
iconfont-线上字体图标使用方法
qq_39111074的博客
04-15 628
1. 引入线上css样式文件 将iconfont官网生成的 在线 css 链接引入到 自己的 html页面文件 2. 添加 两个类名：‘iconfont’ + ‘图标iconfont对应类名’ 在要显示图标的元素上添加两个类名- - -①‘iconfont’ ②iconfont对应图标类名，例如：‘icon-Consultation’ 打开生成的在线链接，可以看到如下格式代码： ...
解决iconfont下载的图标显示的是小方框
Sara0064的博客
01-03 7155
嘿嘿，我来了，最近做vue3项目，忽然发现技术就是越学越有成就感，尤其是每次都征服一个难点的时候。最近写项目遇到iconfont粘贴线上的链接却出现的总是小方块的问题。 第一步，我们先从iconfont粘贴一个线上链接。 粘贴到项目中 将图标名称粘贴到需要的位置 结果我显示的图标是 那么怎么解决呢。 然后在我们vue3项目中public中Index.html中引入 这么做之后我们打开 binggo完成，最近在做vue3的项目，会多多写文档来避免踩坑，技术就是这样，只有你踩了足够多的坑，才能更加
如何获取iconfont项目中所有的图标名称
sunqy1995的博客
04-27 4540
iconfont中提供了一个.json文件用于读取项目中所有的图标的名称，需要在iconfont项目网站上将文件下载下来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值