万象更新 Html5 - css: 字体图标
万象更新 Html5 - css: 字体图标
示例如下:
css\src\iconfont.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<style>
/*
* 把图标文件封装到一个字体文件中，可以方便的使用，并且是矢量的
* 可以在这个网站中编辑包含自定义图标的字体 https://kekee000.github.io/fonteditor/
*
* 另外：https://fonts.google.com/icons 提供了一些常用的图标，可以直接下载使用
*/
/* 引入包含图标的自定义字体 */
@font-face {
font-family: MyFont;
src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAWwAAoAAAAABWgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgUaxt6WNtYXAAAAFUAAABQgAAAUIADfKoZ2x5ZgAAApgAAABIAAAASDhJKvhoZWFkAAAC4AAAADYAAAA2Fr9tAGhoZWEAAAMYAAAAJAAAACQMjAh4aG10eAAAAzwAAAAKAAAACgcAAABsb2NhAAADSAAAAAgAAAAIAA4AJG1heHAAAANQAAAAIAAAACABDwAUbmFtZQAAA3AAAAIKAAACCtXH9aBwb3N0AAAFfAAAADMAAAAz9AFCyAAEBwABkAAFAAAEcQTmAAAA+gRxBOYAAANcAFcBzgAAAgAFAwAAAAAAAAAAAAAQAAAAAAAAAAAAAABQZkVkAEDxAfECBwAAAAChBwAAAAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAAAAAA8AAMAAQAAABwABAAgAAAABAAEAAEAAPEC//8AAPEB//8PAAABAAAAAAAAAQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAWLBYsAAgAAAREBAlUDNgWL++oCCwAAAgAAAAAFQAWLAAMABwAAASERKQERIREBwAEr/tUCVQErAXUEFvvqBBYAAAABAAAAAQAApy4abl8PPPUACwcAAAAAANkLEbwAAAAA2QsRvAAAAAAFiwWLAAAACAACAAAAAAAAAAEAAAcAAAAAAAcAAAABdQWLAAEAAAAAAAAAAAAAAAAAAAACAAAAAAcAAAAAAAAAAAAAAAAOACQAAQAAAAMACAACAAAAAAACAAAACgAKAAAA/wAAAAAAAAAAABAAxgABAAAAAAABAAcAAAABAAAAAAACAAcABwABAAAAAAADAAcADgABAAAAAAAEAAcAFQABAAAAAAAFAAsAHAABAAAAAAAGAAcAJwABAAAAAAAKACsALgABAAAAAAALABMAWQADAAEECQABAA4AbAADAAEECQACAA4AegADAAEECQADAA4AiAADAAEECQAEAA4AlgADAAEECQAFABYApAADAAEECQAGAA4AugADAAEECQAKAFYAyAADAAEECQALACYBHlZpZGVvSlNSZWd1bGFyVmlkZW9KU1ZpZGVvSlNWZXJzaW9uIDEuMFZpZGVvSlNHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQBWAGkAZABlAG8ASgBTAFIAZQBnAHUAbABhAHIAVgBpAGQAZQBvAEoAUwBWAGkAZABlAG8ASgBTAFYAZQByAHMAaQBvAG4AIAAxAC4AMABWAGkAZABlAG8ASgBTAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AaAB0AHQAcAA6AC8ALwBmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAAAIAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAwAAAQIBAwRwbGF5BXBhdXNlAA==) format("woff");
font-weight: normal;
font-style: normal;
}
/* 定义自定义字体图标的样式 */
.myFont-play {
font-family: MyFont;
font-weight: normal;
font-style: normal;
font-size: 64px;
}
.myFont-play:before {
content: "\f101";
}
/* 定义自定义字体图标的样式 */
.myFont-pause {
font-family: MyFont;
font-weight: normal;
font-style: normal;
font-size: 64px;
}
.myFont-pause:before {
content: "\f102";
}
</style>
</head>
<body>
<!--使用自定义字体图标-->
<span class="myFont-play"/>
<span class="myFont-pause"/>
</body>
</html>
