前端 CSS 引入多个 IconFont 字体图标文件

最新推荐文章于 2024-07-19 17:50:11 发布

太阳火神的美丽人生

最新推荐文章于 2024-07-19 17:50:11 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/opengl_es/article/details/115066707

版权

平台-Html5 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

本文详细介绍了前端开发中如何引入和使用字体图标。首先，通过`@font-face`规则在HTML中嵌入自定义字体，支持多种格式以确保跨浏览器兼容性。其次，推荐了阿里巴巴矢量图标库和FontAwesome这两个流行字体图标库。接着，阐述了在CSS中引用和管理多个图标库的方法。最后，讨论了如何在实际项目中有效整合和应用这些图标资源。

摘要由CSDN通过智能技术生成

前端引入字体图标涉及的相关知识链接

1、嵌入 Html 文档的字体

参考 http://css.doyoe.com/ “语法与规则 Rules”节， @font-face

@font-face {
	font-family: 'diyfont';
	src: url('diyfont.eot'); /* IE9+ */
	src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('diyfont.woff') format('woff'), /* chrome、firefox */
		 url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		 url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

2、字体图标

https://www.iconfont.cn/ 阿里巴巴矢量图标库

https://fontawesome.dashgame.com/ Font Awesome

3、Css 如何引入字体图标

4、多个字体图标库的引入

5、图标库的在 Css 中的引用