292 lines
7.4 KiB
HTML
292 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>icon example</title>
|
||
<link rel="stylesheet" href="./page.css">
|
||
<link rel="stylesheet" href="./icon.css">
|
||
</head>
|
||
<body>
|
||
<div class="main">
|
||
<h1>预览字体</h1>
|
||
<ul class="icon-list">
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e001</div>
|
||
<div class="name">uniE001</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e002</div>
|
||
<div class="name">uniE002</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e003</div>
|
||
<div class="name">uniE003</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e004</div>
|
||
<div class="name">uniE004</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e005</div>
|
||
<div class="name">uniE005</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e006</div>
|
||
<div class="name">uniE006</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e007</div>
|
||
<div class="name">uniE007</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e008</div>
|
||
<div class="name">uniE008</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e009</div>
|
||
<div class="name">uniE009</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00a</div>
|
||
<div class="name">uniE00A</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00b</div>
|
||
<div class="name">uniE00B</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00c</div>
|
||
<div class="name">uniE00C</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00d</div>
|
||
<div class="name">uniE00D</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00e</div>
|
||
<div class="name">uniE00E</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00f</div>
|
||
<div class="name">uniE00F</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e010</div>
|
||
<div class="name">uniE010</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e011</div>
|
||
<div class="name">uniE011</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e012</div>
|
||
<div class="name">uniE012</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e013</div>
|
||
<div class="name">uniE013</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e014</div>
|
||
<div class="name">uniE014</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e015</div>
|
||
<div class="name">uniE015</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e016</div>
|
||
<div class="name">uniE016</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e017</div>
|
||
<div class="name">uniE017</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e018</div>
|
||
<div class="name">uniE018</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e019</div>
|
||
<div class="name">uniE019</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01a</div>
|
||
<div class="name">uniE01A</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01b</div>
|
||
<div class="name">uniE01B</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01c</div>
|
||
<div class="name">uniE01C</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01d</div>
|
||
<div class="name">uniE01D</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01e</div>
|
||
<div class="name">uniE01E</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01f</div>
|
||
<div class="name">uniE01F</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e020</div>
|
||
<div class="name">uniE020</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e021</div>
|
||
<div class="name">uniE021</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e022</div>
|
||
<div class="name">uniE022</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e023</div>
|
||
<div class="name">uniE023</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e024</div>
|
||
<div class="name">uniE024</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e025</div>
|
||
<div class="name">uniE025</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e026</div>
|
||
<div class="name">uniE026</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e027</div>
|
||
<div class="name">uniE027</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e028</div>
|
||
<div class="name">uniE028</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e029</div>
|
||
<div class="name">uniE029</div>
|
||
</li>
|
||
|
||
</ul>
|
||
<div class="helps">第一步：使用font-face声明字体
|
||
<pre>
|
||
@font-face {
|
||
font-family: 'fonteditor';
|
||
src: url('fonteditor.eot'); /* IE9*/
|
||
src: url('fonteditor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
url('fonteditor.woff') format('woff'), /* chrome、firefox */
|
||
url('fonteditor.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||
url('fonteditor.svg#uxfonteditor') format('svg'); /* iOS 4.1- */
|
||
}
|
||
</pre>
|
||
第二步：定义使用fonteditor的样式
|
||
<pre>
|
||
.fonteditor {
|
||
font-family:"fonteditor" !important;
|
||
font-size:16px;font-style:normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
-webkit-text-stroke-width: 0.2px;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
</pre>
|
||
第三步：挑选相应图标并获取字体编码，应用于页面
|
||
<pre>
|
||
<i class="fonteditor">&#x33</i>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</body>
|
||
</html>
|