293 lines
7.1 KiB
HTML
293 lines
7.1 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">\21</div>
|
||
<div class="name">exclam</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">"</i>
|
||
<div class="code">\22</div>
|
||
<div class="name">quotedbl</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">#</i>
|
||
<div class="code">\23</div>
|
||
<div class="name">numbersign</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">$</i>
|
||
<div class="code">\24</div>
|
||
<div class="name">dollar</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">%</i>
|
||
<div class="code">\25</div>
|
||
<div class="name">percent</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">&</i>
|
||
<div class="code">\26</div>
|
||
<div class="name">ampersand</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">'</i>
|
||
<div class="code">\27</div>
|
||
<div class="name">quotesingle</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">(</i>
|
||
<div class="code">\28</div>
|
||
<div class="name">parenleft</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">)</i>
|
||
<div class="code">\29</div>
|
||
<div class="name">parenright</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">*</i>
|
||
<div class="code">\2a</div>
|
||
<div class="name">asterisk</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">+</i>
|
||
<div class="code">\2b</div>
|
||
<div class="name">plus</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">,</i>
|
||
<div class="code">\2c</div>
|
||
<div class="name">comma</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">-</i>
|
||
<div class="code">\2d</div>
|
||
<div class="name">hyphen</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">.</i>
|
||
<div class="code">\2e</div>
|
||
<div class="name">period</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">/</i>
|
||
<div class="code">\2f</div>
|
||
<div class="name">slash</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">0</i>
|
||
<div class="code">\30</div>
|
||
<div class="name">zero</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">1</i>
|
||
<div class="code">\31</div>
|
||
<div class="name">one</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">2</i>
|
||
<div class="code">\32</div>
|
||
<div class="name">two</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">3</i>
|
||
<div class="code">\33</div>
|
||
<div class="name">three</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">4</i>
|
||
<div class="code">\34</div>
|
||
<div class="name">four</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">5</i>
|
||
<div class="code">\35</div>
|
||
<div class="name">five</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">6</i>
|
||
<div class="code">\36</div>
|
||
<div class="name">six</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">7</i>
|
||
<div class="code">\37</div>
|
||
<div class="name">seven</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">8</i>
|
||
<div class="code">\38</div>
|
||
<div class="name">eight</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">9</i>
|
||
<div class="code">\39</div>
|
||
<div class="name">nine</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">:</i>
|
||
<div class="code">\3a</div>
|
||
<div class="name">colon</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">;</i>
|
||
<div class="code">\3b</div>
|
||
<div class="name">semicolon</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"><</i>
|
||
<div class="code">\3c</div>
|
||
<div class="name">less</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">=</i>
|
||
<div class="code">\3d</div>
|
||
<div class="name">equal</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">></i>
|
||
<div class="code">\3e</div>
|
||
<div class="name">greater</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">?</i>
|
||
<div class="code">\3f</div>
|
||
<div class="name">question</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">@</i>
|
||
<div class="code">\40</div>
|
||
<div class="name">at</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">A</i>
|
||
<div class="code">\41</div>
|
||
<div class="name">A</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">B</i>
|
||
<div class="code">\42</div>
|
||
<div class="name">B</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">C</i>
|
||
<div class="code">\43</div>
|
||
<div class="name">C</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">D</i>
|
||
<div class="code">\44</div>
|
||
<div class="name">D</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">E</i>
|
||
<div class="code">\45</div>
|
||
<div class="name">E</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">F</i>
|
||
<div class="code">\46</div>
|
||
<div class="name">F</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">G</i>
|
||
<div class="code">\47</div>
|
||
<div class="name">G</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">H</i>
|
||
<div class="code">\48</div>
|
||
<div class="name">H</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon">I</i>
|
||
<div class="code">\49</div>
|
||
<div class="name">I</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>
|