iconfont的用法

最新推荐文章于 2024-08-21 15:16:29 发布

it小白求知路

最新推荐文章于 2024-08-21 15:16:29 发布

阅读量639

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39248122/article/details/89227695

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目前我已知有两种获取iconfont的方法，1.使用阿里的iconfont库获取 2.使用在线生成工具

首先介绍阿里的

阿里iconfont库

进入之后选择你想要的icon，然后把他添加到你的项目中，选择本地下载，就可以使用了

例如

1.选择你想要的icon，并把它添加到库中

2.打开库

3.把它添加到你的项目中

4.下载到本地，同时它还有修改功能，下载到本地就可以使用了

在线生成

1.首先你需要一个icon的svg格式图片

2.进入在线生成工具

3.选择你的icon图片

4.点击选择，选中图片

5.点击第三个

6.点击下载

点击这里有代码显示

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="./1/fonts/iconfont.css">
	<link rel="stylesheet" href="./2/style.css">
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span class="iconrmb"><p>这是第一种</p></span>
	<span class="icon-2x"><p>这是第二种</p></span>
	<style type="text/css">
		@font-face{
		    font-family: 'iconfont';
		    src: url('./1/fonts/iconfont.eot');
			src: url('./1/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
			    url('./1/fonts/iconfont.woff2') format('woff2'),
			    url('./1/fonts/iconfont.woff') format('woff'),
			    url('./1/fonts/iconfont.ttf') format('truetype'),
			    url('./1/fonts/iconfont.svg#iconfont') format('svg');
		  　font-family:'icomoon';
			src: url('./2/font/fonts/icomoon.eot'); 
		  　src: url('./2/font/fonts/icomoon.ttf') format('truetype'), 
			  　url('./2/font/fonts/icomoon.woff') format('woff'),
			    url('/1/fonts/icomoon.ttf') format('truetype'),
			  　url('./2/font/fonts/icomoon.svg#icomoon') format('svg'); 
		}

		.iconrmb {
		  font-family: "iconfont";
		  font-size: 46px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		}
		.icon-2x {
		  font-family: "icon-2x";
		  font-size: 46px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		}
	</style>
</body>
</html>