阿里iconfont使用教程

m0_73935181 已于 2023-06-15 18:28:46 修改
阅读量1.1k 收藏 4
点赞数 1
文章标签： css css3 前端
于 2023-06-15 18:28:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/m0_73935181/article/details/131231341
版权

一、打开iconfont官网

iconfont官方网站

 二、点击右上角登录并注册

三、在上方搜索框中输入想要的图标

四、找到自己想要的图标，点击加入库在这里插入图片描述

五、点击购物车图标

六、创建项目，输入项目名称

七、选择Unicode，点击下载本地

八、将下载好的字体图标的压缩包解压，将css文件放到项目CSS文件夹中并更改路径

九、在项目中创建目录并将这三个文件放进目录

十、在HTML中引入iconfont.css文件

十一、挑选相应图标并获取字体编码，应用于页面在这里插入图片描述

m0_73935181
关注 关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
阿里iconfont使用方法
QW's Blog
02-14 6915
阿里巴巴iconfont的使用方式分为两种： 本地使用 线上引用 iconfont-阿里巴巴矢量图标库 0.前期准备 使用时先到网站上选中需要使用的图标添加至项目 1.本地使用 1.下载项目至本地 2.解压到项目中 3.在页面中引入样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
关于在项目中如何使用阿里巴巴iconfont 矢量图标
m0_50478723的博客
02-20 410
5 在main.js 引入即可 import './assets/iconFont/iconfont.css'6 项目使用 <i class="iconfont el-icon-alidaohang"></i>4 在assets 文件夹下创一个iconfont 文件夹 并且将截图红框部分复制进去。点击右上角购物车 添加到项目 没有项目的新创建一个。1 注册阿里巴巴iconfont 地址。2 选择自己需要的icon 加入购物车。3 在我的项目 点击下载到本地。
iconfont阿里巴巴矢量图标库使用步骤
wangshuai13383347132的博客
11-02 443
iconfont阿里巴巴矢量图标库使用步骤 1.注册账号 2.选中图标，添加到购物车 点击购物车，将图标添加到项目 3.在我的项目中，点击下载至本地 4.解压download.zip压缩包，并将解压出来的文件名改成font 5. ...
Vue项目中引用‘阿里巴巴字体图标库iconfont’，2024年最新深度解读Netty
最新发布
zhuceyigecsdn的博客
04-18 309
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些前端面试题以及学习路线给大家网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
CSS 之 iconfont 字体图标的使用
qq_69240236的博客
03-11 746
学到了吧。
【CSS】阿里iconfont的使用方法（另附font-family引入方法）
weixin_42771853的博客
12-21 8287
介绍在 CSS 中引入阿里 iconfont 图标的方法（另附通过font-family引入的方法，无需声明class）
使用iconfont图标教程
qq_35353972的博客
09-23 5013
使用iconfont图标教程
阿里巴巴矢量图标库 iconfont 的使用方法
飞飞程序员
04-29 4638
xx-blog主题使用的图标库是阿里巴巴的iconfont，因此这里介绍一下此主题库的用法。 首先去iconfont主题库，注册一个账号，然后就可以找自己喜欢的图标了，找到后点击添加购物车，就会到了右侧的购物车中，然后去个人中心下载即可。
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
weixin_44867717的博客
04-08 6601
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式 一、下载图标 1、先进入iconfont.cn页面 iconfont官网：https://www.iconfont.cn/ 2、登陆，并选择你要用的图标进行下载 3、点击下载，并选择弹框下面的色值和大小，点击svg下载，并进行重命名 1-浅灰正常图标 2-明蓝高亮图标 4、把下载的svg图标，放进本地项目里的某个文件夹，进行使用 二、使用图标 1、找到所需界面的html代码 2、在HTML中插入css文件 3、 在html里面插入一
iconfont使用详细步骤
前端小白成长记
11-25 7003
1、使用说明：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code 2、查找具体想要的icon图标 3、查找到需要的图标后，点击下载按钮，进入下载页面 如果单张下载的话，可以直接点击最下方那排，选择自己想要下载的格式。 如果想要将这个图标库所有图标都下载下来，可以点击右侧的图标库。 4、下载多个图标 将想要下载的图片加入购物车，然后点击购物车，可以一起.
IconFont使用方式简介
热门推荐
qq_45327886的博客
03-02 2万+
Iconfont在线和本地引入方式简介
阿里云使用方法123456
09-14
阿里云使用方法123456
vue项目引入Iconfont图标库的教程图解
01-19
在进行项目开发过程中,vue项目中前端所使用的UI框架是element ui,但是element的字体图标库不足以满足日常开发的需要,或者公司项目要求使用本公司ui设计的图标,都可以参考以下的步骤, 1. 在阿里图标库中选中你想要的...
详解CSS中iconfont的使用
09-24
主要介绍了详解CSS中iconfont的使用,阿里巴巴的iconfont库非常有人气,同时也介绍了iconfont的一些缺点,需要的朋友可以参考下
IconFont for Android.zip
12-14
在安卓上使用阿里的IconFont图标库，有TextView和Drawable两种使用方式，支持渐变、描边、阴影、大小设置
iconfont 阿里巴巴矢量图标库使用方法
ECHK1NG的博客
09-23 1425
阿里巴巴矢量图标库iconfont是由用户自己制作上传所组成的一套图标库。 在iconfont的官方文档中提供了三种使用途径。
使用阿里巴巴IconFont的方法
蜗牛在奔跑的博客
03-04 528
第一步.注册登录 https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.6 第二步 选择图标----创建项目---将图标添加到项目 第3步生成代码 第4步 拷贝代码： @font-face { font-family: 'iconfont'; /* project id 3221706 */ src: url(''); src: url('?#iefi...
P8-图标字体-font-awesome-伪类-阿里图标字体icnfont-字体-行高-文本样式
LXMXHJ的博客
03-26 828
文章目录图标字体font-awesome图标字体通过伪类来使用图标字体阿里图标字体icofont字体基本属性字体单位行间距设置字体样式font行高line-height文本样式text-align设置文本的水平对齐方式vertical-align设置文本的垂直对齐方式text-decoration设置文本修饰text-indent首行缩进white-space处理空白内容text-overflow 处理溢出的文本letter-spacing 字母间的距离word-spacing 单词间的距离案例 图标字体
iconfont网站
01-03
iconfont是一个非常受欢迎的图标库网站，它提供了大量的免费图标素材供用户使用。以下是iconfont网站的介绍和演示： 1. iconfont网站介绍： iconfont是由阿里巴巴集团推出的一个图标库平台，它汇集了来自全球各地的设计师们创作的图标素材。这些图标可以用于网页设计、移动应用开发、UI设计等各种场景。iconfont网站提供了丰富多样的图标，包括矢量图标、字体图标、SVG图标等。用户可以通过搜索、浏览分类或者上传自己的图标来获取所需的图标素材。 2. iconfont网站演示： 以下是一个使用iconfont网站的演示代码，以获取一个搜索图标为例： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//at.alicdn.com/t/font_1234567_abcd1234.css"> <style> .search-icon { font-family: "iconfont"; font-size: 24px; } </style> </head> <body> <i class="search-icon"></i> </body> </html> ``` 在上述代码中，我们首先引入了iconfont的字体文件，然后定义了一个样式类`.search-icon`，并设置了字体大小。最后，在`<i>`标签中使用了对应的图标代码``，这里的代码可以在iconfont网站上找到。 通过以上代码，我们可以在网页中显示一个搜索图标，这个图标可以根据自己的需求进行样式调整。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 阿里iconfont使用教程 1113
  • css3弹性盒（新） 60

最新评论

  • css3弹性盒（新）

    CSDN-Ada助手: 恭喜您写出了第一篇博客！您对CSS3弹性盒的介绍很清晰明了，让我受益匪浅。不过，作为一个博客创作者，您可以考虑加入更多实例和案例，让读者更好地理解和应用该知识。期待您的下一篇博客！ 推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1 如果您持续创作，完成第三篇博客，并且质量分达到 80 分以上，在评论区就有机会获得红包奖励哦！

  • 阿里iconfont使用教程

    CSDN-Ada助手: 非常感谢您分享这篇博客，阿里iconfont的使用教程对于前端开发者来说非常实用。除了这些基础的教程，您还可以在学习过程中了解更多关于字体图标的知识，如如何自定义字体图标、如何使用字体图标制作动画等等。希望您能继续分享更多优质的技术文章，让更多人受益。 如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2 如果您持续创作，完成第三篇博客，并且质量分达到 80 分以上，在评论区就有机会获得红包奖励哦！

最新文章

  • css3弹性盒（新）
2023年2篇

目录

目录

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值

PHP网站源码黔南SEO按效果付费推荐南澳SEO按天计费推荐那曲网页制作哪家好安庆网站推广哪家好临汾网站优化软件多少钱开封品牌网站设计宁波网站排名优化安阳网站设计推荐宣城网页制作多少钱光明百度标王多少钱雅安至尊标王报价桂林模板制作唐山网站推广推荐常德百度竞价公司巴中模板推广公司广东网站优化推广公司遂宁网站改版威海优化报价杭州模板网站建设多少钱宁波网站优化推广多少钱襄阳网站制作设计公司来宾网站搭建多少钱德州seo优化推荐清远seo优化价格坂田英文网站建设多少钱同乐网站seo优化多少钱曲靖网站建设设计木棉湾至尊标王哪家好亳州SEO按效果付费价格马鞍山模板制作价格歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅：唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人？开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

PHP网站源码 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化