在html中引入iconfont图标

发布时间:2024-11-09 12:45

最新推荐文章于 2024-09-29 13:09:57 发布

qq_39355295 于 2019-04-26 11:22:03 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

最近练习前端页面的渲染,加强一下自己的html与css技术,其中就涉及到引入图标的问题。这里我主要演示一下引入iconfont-阿里巴巴图标:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

网站搜素想要的图标:
在这里插入图片描述选择自己中意的图标,鼠标放在图标上面,如果只是想要图片的话,选择下载,然后在图标下载页面,选择对应的样式,下载即可。选择自己中意的图标,鼠标放在图标上面,如果想要在html中以class文件引入的话,则需要,选择加入购物车图标,在这里插入图片描述
然后点击购物车图标,点击页面加入到项目,在这里插入图片描述
这里注意需要登录iconfont,有自己新建的项目。
把自己想要的图标全部加入完成后,按照箭头指示下载即可。
在这里插入图片描述
下载完成后,解压,把文件放在html对应的文件中,然后在html页面中引入iconfont.css样式文件:

<link rel="stylesheet" href="font/iconfont.css" type="text/css"> 1

引入对应的class文件样式下面是代码示例:iconfont是必须要加入的 icon-qq是对应的iconfont中对应的图标文件。

<li><i class="iconfont icon-qq"></i></li> 1

以后如果想要在引入想要的图标,在iconfont.css中引入即可,至此就完成了html中引入iconfont样式文件的引入。

网址:在html中引入iconfont图标 https://www.yuejiaxmz.com/news/view/20744

相关内容

HTMl综合各大网站谈谈Meta标签和meta property=og标签含义
HTML SiteMap
中国居民生活节能引导政策的效力与效果评估——基于中国1996
form runat=server标记
对matlab中的sparse()深刻理解
安全健康小贴士
【南三环中路27号芳群公苏宁电器2层】位置示意图,地图位置,交通指引,周边酒店
中国结图片
三星 One UI 7 概览:升级图标、改善家长控制、AI 增强照片
发挥节能在实现“双碳”目标中的作用

随便看看