CSS字体图标

最新推荐文章于 2024-08-14 10:42:14 发布

安澜仙王

最新推荐文章于 2024-08-14 10:42:14 发布

阅读量405

点赞数

分类专栏： # CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/sinat_28317385/article/details/119969239

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用字体图标库icomoon和阿里iconfont。字体图标因其轻量级、灵活性和良好的兼容性，成为前端开发中的优选。通过在icomoon中选择、编辑和下载图标，再到项目中引入和使用，可以方便地实现图标展示。阿里iconfont则提供了搜索图标、添加到项目并下载到本地的流程。这两种工具都允许添加新字体以更新图标库。

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

字体图标的产生

字体图标使用场景:主要用于显示网页中通用、常用的一些小图标
精灵图是有诸多优点的，但是缺点很明显

图片文件还是比较大的。
图片本身放大和缩小会失真
一旦图片制作完毕想要更换非常复杂

此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

字体图标的优点

轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器，请放心使用

总结：
1,如果遇到一些结构和样式比较简单的小图标，就用字体图标
2,如果遇到一些结构和样式复杂一点的小图片，就用精灵图

字体下载

推荐两个网站：
阿里字体库：https://www.iconfont.cn/
icomoon字体库：https://icomoon.io/

icomoon使用详细介绍

资料来源：https://blog.csdn.net/qq_37523448/article/details/92768958

1，点击icomoon app按钮

在这里插入图片描述

2，点击选择图标

想要更多的图标点击Add Icons From Library…
在这里插入图片描述
点击add

3，编辑图标

可编辑可不编辑，按自己需求来，可以旋转图标之类的
在这里插入图片描述

4，下载字体

在这里插入图片描述
点击download

在这里插入图片描述

5，文件说明以及导入

解压刚才下载的文件，把该文件放到主目录
在这里插入图片描述
放到项目的主目录，作者的练习项目名字为44

文件说明

demo-files,demo.html demo示例文件。
fonts 字体文件。
Read Me.txt 说明文件。
selection.json iconmoon项目文件，可用于导入。
style.css 项目中需要用到的样式文件。

6，导入字体

引用style.css文件

<link href="icomoon/style.css" rel="stylesheet">

回到官网下载的页面，鼠标移动图标处，点击getcode，
在这里插入图片描述

7，示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="icomoon/style.css" rel="stylesheet">
		<style type="text/css">
		
		</style>
	</head>
	<body>
		<span class="icon-microsoftonenote"></span>
	</body>
</html>

在这里插入图片描述
也可以CSS引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="icomoon/style.css" rel="stylesheet">
		<style type="text/css">
			div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }
        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            /*这里引入*/
            font-family: 'icomoon';
            content: "\e907";
  			color: #43b02a;
            font-size: 18px;

        }
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

在这里插入图片描述

8，添加新字体

在这里插入图片描述

添加新的图标重新下载，覆盖项目里的icomoon文件夹就ok了

阿里字体库iconfont使用教程

资料来源:https://www.cnblogs.com/pink-chen/p/11132940.html

1，登录，然后点击我的项目

在这里插入图片描述
添加新项目

2，搜索图标库，添加购物车

在这里插入图片描述

3，添加到新建的项目，下载到本地

在这里插入图片描述

下载的文件如图所示
在这里插入图片描述

4，把该文件放到项目中

重命名fonts文件

打开demo_index.html文件，按照上面的方法引入字体
在这里插入图片描述
示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="fonts/iconfont.js"></script>
		<style>
			.icon {
			  width: 1em;
			  height: 1em;
			  vertical-align: -0.15em;
			  fill: currentColor;
			  overflow: hidden;
			}
		</style>
	</head>
	<body>
		<svg class="icon" aria-hidden="true">
		  <use xlink:href="#icon-bus"></use>
		</svg>
	</body>
</html>