在html中引用矢量图

来源：互联网发布：python base64 编辑：程序博客网时间：2024/06/05 00:26

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

0 0