【Web】CSS（No.31）字体图标

最新推荐文章于 2024-05-05 21:01:18 发布

Sherry Lupus

最新推荐文章于 2024-05-05 21:01:18 发布

阅读量326

点赞数

分类专栏： Web-Css 文章标签： Web Css

本文链接：https://blog.csdn.net/qq_43251850/article/details/91492714

版权

Web-Css 专栏收录该内容

25 篇文章 5 订阅

订阅专栏

字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。尤其是在移动端响应式，很多情况下希望我们的图标是可以缩放的。此时就需要字体图标（iconfont)。

字体图标优点

可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备必备良药…

字体图标使用流程

总体来说，字体图标按照如下流程：

在这里插入图片描述

设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，之后保存为svg格式，然后给我们前端人员就好了。

其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。

上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。
推荐网站： http://icomoon.io
icomoon字库
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

推荐网站： http://www.iconfont.cn/
阿里icon font字库
http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！

fontello
http://fontello.com/
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome
http://fortawesome.github.io/Font-Awesome/
更新比较快，目前已经有369个图标了。

Glyphicon Halflings
http://glyphicons.com/
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8
https://icons8.com/
提供PNG免费下载，像素大能到500PX

下载兼容字体包

刚才上传完毕，网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了

当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了，直接到刚才的网站上找喜欢的下载使用吧。

字体引入到HTML

得到压缩包之后，最后一步，是最重要的一步了，就是字体文件已经有了，我们需要引入到我们页面中。

首先把以下4个文件放入到 fonts文件夹里面。通俗的做法

第一步：在样式里面声明字体：告诉别人我们自己定义的字体
```
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
```
第二步：给盒子使用字体
```
span {
		font-family: "icomoon";
	}
```
第三步：盒子里面添加结构
```
span::before {
		 content: "\e900";
	}
或者  
<span></span>  
```
追加新图标到原来库里面

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>字体图标</title>
	<style>
		/*1.声明你所需要用的字体文件*/
		@font-face {
			/*自定义自己的字体名字*/
		  font-family: 'myIcon';
		  src:  url('fonts/icomoon.eot?6ujc2j');
		  src:  url('fonts/icomoon.eot?6ujc2j#iefix') format('embedded-opentype'),
		    url('fonts/icomoon.ttf?6ujc2j') format('truetype'),
		    url('fonts/icomoon.woff?6ujc2j') format('woff'),
		    url('fonts/icomoon.svg?6ujc2j#icomoon') format('svg');
		  font-weight: normal;
		  font-style: normal;
		}

	/*2.使用字体图标*/
	span{
		font-family: 'myIcon';
		font-size: 30px;
		color: red;
	}
	/*字体图标是字*/
	/* ::before伪元素相当于在当前div的前置位放了一个行内元素 */
	/*content属性: 内容   \ :  转义符 ,转义符后面放对应图标的特殊字符*/
	div::before{
		content:"\e948";
		font-family: 'myIcon';
	}


	@font-face {font-family: "my";
  src: url('ff/iconfont.eot?t=1556524046692'); /* IE9 */
  src: url('ff/iconfont.eot?t=1556524046692#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQEAAsAAAAACCQAAAO4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqECINXATYCJAMMCwgABCAFhG0HRBsjB8gOJSHBwABgoFBgPPx3b943M1urbahUjPfjS3sCFIpAtDQKcMTi4arhH/D96zftUVJVcr5nVlMnZCFAbGBPRJWezr/7/xwubYrP7w2XuQZGvQDjgKJ4zA3UDZA7kRPzG8YuaInrCbRtGIC6yC6sBBeF2S0Q16LAgktGpTRkh6ZQrxhbxAs4aqZbh5sAnoPfjwrCw4Wklpl9l1dZRkit5r6eR4/9P1ajhwD2dAawSWQcAoVYVZqW6Ch0iNZWQzqbYFvNgmre//9Ucz3WZv/hERJRZ4q6ELsrTFfEdkQujQ3DEq7dTd0jRN4A/GPs9K2y1B0memRyM7SM648zFx7scfJRs/ehe510K+9Geh2+39lxzYNh9Ljtbl53W0F3s83d+34HRX08rn74sPLx45olJ2KuPKo6EOFBdaKNyV6XMO7Q0e73WVm1qeehS9wlrUZ7nH85verDR0L3JVs2LQuoXKZf1XfRphlbmB0HqMeTpD56VKVpNUydiJlUUJ1lVMQ9fJg5/Xo/T1C9zKWaVnXoVvriWDn12jtb94kf//beRpnSNp4dW+Vy1qVqbNAwdH7NDy9fr7PONynJ2pmX3iU6Y0peHoysFSyPK7hznJGXdippf6FjJtqScAPdqICCl3L2KrqasIFpHlCYpf89ddcYOKftNOUG5PrmRaljd0WHE++Iv4kNmw8N6DW/t4t51y2zj/mWQ/fO9KJLlxbR6+m2Npe/ntLh3CqcsEY3UfKkkbUNMcn2ZxOnUqd0f/4UwD8F6fCue+lXr+i9VFmpfK5LS0KP/Em5eX6V+qK1jKEju8BYFaCvgVaA9dlsiVID5Ja/oBD8qefyW7wTv7q4F/D75pYXcK7PFuiu0XwF5uB3sjuWFU0Ki4vCcliGJbt8PYYEZHCrNZi2sZfDJbPOAUIzw2aQNCwga9pEFuwh1HQcQV3TMbQdyJncMaGgRWlh3yQAYWgPJH3vkA3dQhbsC6iZewt1w6ChbRX+c3Zsh+iWoWCWYCMyDEMiZ7Pytpa4hdnlWBhkZpU0N8BVY0UVvSgsODQfzcFWrEwxQB0shBPCI16xWVA22AybzTZkV2wS5kiwiRB7fEgIX/WiYM5mATfnFBiLwIwQg2EQEcfGiveqE26Fny+HCQYxYykNJVXaaphCJdaPhAkW2gGZI7J2KrmVS1SDCcIRBA/hKWwskGxgwMxWyAaxV7eSYBwimGlAwC5eCKrEdxUFLy+xvN8aaDOLc6TIUQwvPa+FNYt2dliLZ7Zi55yRAAA=') format('woff2'),
  url('ff/iconfont.woff?t=1556524046692') format('woff'),
  url('ff/iconfont.ttf?t=1556524046692') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('ff/iconfont.svg?t=1556524046692#iconfont') format('svg'); /* iOS 4.1- */
}


h1 span{
	font-family: 'my';
}



	</style>
</head>
<body>
	<span> sdj</span>
	<div>哈哈哈哈哈</div>
	<h1><span class="icon iconfont"></span></h1>
</body>
</html>