欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

字体图标

程序员文章站 2024-02-16 23:28:04
...

前言:字体图标由于其灵活及以维护,在越来越多的页面中开始使用字体图标。
大家可以在www.icomoon.io中下载字体图标,也可以将精灵图转换为字体图标。因为是国外的服务器,所以加载的慢一些
字体图标
选择自己需要的字体图标下载即可。
下载后解压打开如下:
不要删除任何文件字体图标

**

字体图标的使用

**
在css中必须写上以下代码,把fonts文件夹复制到css所在的文件夹,不然不会显示字体图标

@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;
	}

下有两种引入方法
1、

span {
   	font-family: "icomoon";  /* 一定保证和上面的 font-family: 相同 */
   	font-size: 100px;
   	color: pink;
   }
   <span><\span>

2、

div::before {
   	font-family: "icomoon";  /* 一定保证和上面的 font-family: 相同 */
   	font-size: 100px;
   	color: #E44419;
   	content: "\ea9a";
   }
   <div></div>

这个在下载的字体包里面的有一个网页,将其打开选择复制
第二种方法是复制前面的数字
字体图标
**

增加字体图标

**
字体图标
在下载一次即可。

相关标签: css css3