#前端开发# 【二】如何将iconfont里面的图标，引用到代码里？

最新推荐文章于 2022-12-02 17:52:51 发布
最新推荐文章于 2022-12-02 17:52:51 发布
阅读量304 收藏
点赞数 2
分类专栏： 前端-库 文章标签： 大前端 javascript css html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/117794147
版权

如何将iconfont里面的图标，引用到代码里？

如何将iconfont里面的图标，引用到代码里？
第一个是字体（unicode）
第二个是颜色（font class）

按照提示复制代码
在这里插入图片描述

将复制好的代码，放到index.html文件里
在这里插入图片描述
在这里插入图片描述

 <link rel="stylesheet" type="text/css" href="复制的链接粘贴在这里">

在这里插入图片描述
选取需要的图标
做为类名，
在类名前面写上iconfont ，后面可以跟修改的样式（颜色、字体大小）

<span class="iconfont iconlujing1" style="color: #dd2525;"></span>
Miraitowa_chole
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html如何太假icon图标,如何在我的html中使用Flaticon中的图标？
weixin_33539366的博客
06-04 1404
我想给我的网站一些图标。现在我看到很多人使用这个网站Flaticon。如何在我的html中使用Flaticon中的图标？我所做的是把这样的事情在我的CSS：/*** Font 1*/@font-face {font-family: "Flaticon1";src: url("flaticon1.eot");src: url("flaticon1.eot#iefix") format("embedd...
vue项目改图标_vue使用自定义icon图标的方法
weixin_39766071的博客
12-19 3593
首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家效果图：推荐使用阿里爸爸矢量图标管理，iconfont使用方法 登录账号，找到需要的图标加入购物车然后添加到项目再然后下载代码到本地下载代码文件然后解压出现这列表打开HTML文件，引用方法教程补充我人的坑，之前想着在style标签里@import ""，结果一直报错，试...
如何在代码里添加并使用阿里巴巴矢量图标-iconfont，在此常用有三种引入方法
lan_shen的博客
01-02 2881
iconfont-阿里巴巴矢量图库 在登录好账号的前提下进行以下操作： 添加icon： 首先搜索你想要的icon名，比如：首页 选好你想要的图——加入购物车——添加至项目（没有项目的话可以新建项目，如果需要很多icon，建议一次挑选好再全部添加至项目，便于下载和引用）——点击下载到本地——解压下好的zip文件 把解压后的文件夹放到项目里并引入 第一种引入方法： 打开icon文件夹里的css文件 打开后在文件里面找到对应的icon名称 在 <i> </i> 标签里面添加cl
iconfont使用方式简介
weixin_38499606的博客
11-01 2780
element-ui 自定义iconfont
python项目打包exe程序 绝对不报错
郑能量
12-17 775
安装插件 pip install pyinstaller 1、第一种 pyinstaller --hidden-import=queue -w -F main.py 2、第二种 pyinstaller --hidden-import=pkg_resources -F main.py 如果出现资源部问题那么就在后面加上资源部绝对路径： pyinstaller --hidden-import=pkg_...
iconfont的N种使用方法
weixin_44042442的博客
12-02 1万+
icon-font的使用方法 为什么icon font是一个方形的框 图标不显示
HTML中引用icon图标
热门推荐
qq_43804601的博客
05-03 1万+
简单介绍在HTML如何中引用icon图标 1.登录iconfont官网 生成连接 ① 搜索想引用的图标，找到后加入购物车 ② 在购物车中将icon图标添加至项目 ③ 点击生成新代码 生成代码（示例）： //引入iconfont的声明 @font-face { font-family: 'iconfont'; /* Project id 3373080 */ src: url('//at.alicdn.com/t/font_3373080_hrq4d4vg3gp.woff2?t=1651
Web-前端html+css从入门到精通 156. iconfont矢量图标库.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础技术，而Iconfont矢量图标库则是提升用户体验、美化网站设计的重要工具。本课程“Web-前端html+css从入门到精通 156. iconfont矢量图标库”将深入讲解如何使用Iconfont来...
iconfont小图标
08-16
8. **兼容性**：Iconfont图标库广泛兼容各种浏览器，包括IE8及以上版本，确保了良好的用户体验。 9. **持续更新**：阿里巴巴体验团队会定期更新和扩充图标库，确保图标资源的时效性和多样性。 10. **社区贡献**：...
iconfont图标资源iconfont图标资源
12-08
Iconfont图标资源的使用，极大地简化了前端开发中的图标集成过程，提高了开发效率，同时也使得网站或应用的图标在不同设备和分辨率下保持一致的显示效果。对于开发者而言，熟悉并掌握如何使用Iconfont这样的图标库是...
Web前端矢量小图标的使用方法
11-21
font-class引用是基于字体技术实现的图标引用方式，其优点包括良好的浏览器兼容性（支持IE8+及所有现代浏览器），并且在替换图标时只需修改CSS类名。但需要注意的是，由于本质是字体，所以font-class不支持多色图标...
Web前端学习—如何在网页中插入字体图标详细步骤
01-08
在Web前端开发中，字体图标是一种非常实用的技术，它允许开发者使用特定的字体文件来显示图形元素，而不是传统的图像格式。这种方式的优点在于图标可以随着文本缩放，而且加载速度快，对于响应式设计和移动端优化...
微信小程序.阿里巴巴矢量图标库iconfont使用
记录 分享 成就
05-25 775
场景 前端图标： Iconfont 介绍 Iconfont 是阿里提供了一个图标库，你可以想象成是一个售卖图标的超市，挑选你需要的图标放入购物车，然后 Iconfont 会为你打包你购物车里的图标，自动生成一种新的字体，你可以选择下载到本地，在你的项目中引入这种字体，这样即便没有网络的情况也可以使用图标。 这种模式的一大优点就是只挑选出需要的图标，不会像其他图标库那样直接下载一整个图标库的内容，尽管你可能只会使用到其中一到两个图标。要知道，有的项目打包上线对大小是有严格要求的，比如微信小程.
vue iconfont阿里图标库的三种使用方法
GKISX1216的博客
05-20 5139
1、下载方法 1.打开阿里iconfont，记得登录才可以下载，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 ，点击资源管理器=》我的项目 2、选择font class，可以点击下载至本地，也可以生成在线地址 打开你的网页代码，添加link标签，将上面的代码粘贴到href属性下。注意需为路径添加“http：”字样。 然后使用i标签引用图标。图标名称可以在iconfont“我的项目”中点击“复制代码”获取。 <i class="iconfon..
Iconfont使用的两种方法
weixin_34233856的博客
04-10 532
1、将自己需要的小图标加入购物车 2、点击右上角购物车，将添加的小图标添加到项目里 3、在“我的项目”里（2以后会自动跳转到这个页面）,选择“Unicode”引用（unicode是字体在网页端最原始的应用方式），然后点击“下载至本地” 方法一： 4、将下载的压缩包解压，可把整个包里面的文件复制到自己的项目中（懒人方法），也可指复制如图代码@font-face里面引入的文件。 并把@font-...
HTML 引用小图标
x311609001028的博客
01-07 3518
阿里巴巴矢量图标库里有各种类型小图标，引用这些图标代替绘制或PS很方便。 阿里巴巴矢量图标库 将需要的图标加到自己项目里，会生成链接代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...
iconfont的三种引用方法
crsitin_spade的博客
09-07 6443
Hi，guys！ 虽然我好像不写VUE就没啥人看了，本来也没什么人看 但我还是不写VUE，hhhh 今天我们来看看iconfont的三种引入方法 首先我们先挑一个要用到的图片，添加图库 然后右上角的小车里就会有了你添加的东西 再把它添加进你的项目里 我们可以看到，下面有Unicode，Font class，Symbol三种方法，先记得更新下面的代码 第一种 Unicode 我们先用的一种，将他给的font-face全部复制到页面的样式中 <style> @font-face {
关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）
ake520520的博客
04-12 3464
1.附阿里图标库链接：http://www.iconfont.cn/ 2.登录阿里图标库以后，搜索我们需要的图标，将其加入购物车，如图3.将我们需要的图标全部挑选完毕以后，点击购物车图标4.这时候右侧会出现一个预览窗口，显示我们前面加入购物车的那些图标，我们选择页面中的下载代码 5.查看一下我们的下载包里面都有什么文件 6.使用fontclass方式其实在下载的文件...
通过油猴子脚本改造iconfont页面，使得直接带i标签复制
两天打鱼三天晒网
01-23 1478
// ==UserScript== // @name iconfont复制代码设置dzw // @include https://www.iconfont.cn/manage/index* // @require https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js // @version 1 // @grant ...
如何将Iconfont网站下载的图标集成到nextjs前端页面中
最新发布
05-24
要将Iconfont网站下载的图标集成到Next.js前端页面中，您可以按照以下步骤进行操作： 1. 将下载的图标文件解压缩后，将其中的.ttf文件和iconfont.css文件复制到您的Next.js项目的/public文件夹中。 2. 在您的Next....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值