在html中引用矢量图

最新推荐文章于 2024-05-14 10:06:15 发布

TerryWater

最新推荐文章于 2024-05-14 10:06:15 发布

阅读量1w

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/terry_water/article/details/44928571

版权

html5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.通过工具制作svg矢量图

http://blog.csdn.net/terry_water/article/details/44928229

将生成的svg矢量图导入，然后生成font字体

https://icomoon.io/app/#/select

在上面生成导出，会下载下来一个压缩包

解压后，里面有一堆文件：

1.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>IcoMoon Demo</title>
	<meta name="description" content="An Icon Font Generated By IcoMoon.io">
	<meta name="viewport" content="width=device-width">
	
	<link rel="stylesheet" href="style.css"></head>
	<body>
		<span style="font-size:44px;" class="icon-arrowleft">
		
		</span>
	</body>
</html>

fonts 这个文件夹

style.css文件

这个css文件引入来fonts这个文件夹里面的font文件，然后进行的生成

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-2pdlqj');
	src:url('fonts/icomoon.eot?#iefix-2pdlqj') format('embedded-opentype'),
		url('fonts/icomoon.woff?-2pdlqj') format('woff'),
		url('fonts/icomoon.ttf?-2pdlqj') format('truetype'),
		url('fonts/icomoon.svg?-2pdlqj#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-arrowleft:before {
	content: "\2190";
}

.icon-arrowright:before {
	content: "\2192";
}

.icon-uni2630:before {
	content: "\2630";
}

.icon-uni2699:before {
	content: "\2699";
}

.icon-uniE78E:before {
	content: "\e78e";
}

.icon-uniF09E:before {
	content: "\f09e";
}

.icon-uniF0C9:before {
	content: "\f0c9";
}

.icon-uniF0E0:before {
	content: "\f0e0";
}

.icon-u1F464:before {
	content: "\1f464";
}

.icon-home:before {
	content: "\e900";
}

.icon-list:before {
	content: "\e9ba";
}

.icon-list2:before {
	content: "\e9bb";
}

.icon-menu:before {
	content: "\e9bd";
}

TerryWater

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在html中引用矢量图

1.通过工具制作svg矢量图http://blog.csdn.net/terry_water/article/details/449282292.将生成的svg矢量图导入，然后生成font字体https://icomoon.io/app/#/select3.在上面生成导出，会下载下来一个压缩包解压后，里面有一堆文件：1.html IcoMoon Dem
复制链接

扫一扫