Web Font Icon

大漠制作
<div class="demo">
  <div class="box">
    <div class="title">A</div>
    <div class="code">#0065</div>
    <div class="icon">A</div>
  </div>
  <div class="box">
    <div class="title">D</div>
    <div class="code">#0068</div>
    <div class="icon">D</div>
  </div>
  <div class="box">
    <div class="title">S</div>
    <div class="code">#0083</div>
    <div class="icon">S</div>
  </div>
  <div class="box">
    <div class="title">W</div>
    <div class="code">#0087</div>
    <div class="icon">W</div>
  </div>
  <div class="box">
    <div class="title">a</div>
    <div class="code">#0097</div>
    <div class="icon">a</div>
  </div>
  <div class="box">
    <div class="title">b</div>
    <div class="code">#0098</div>
    <div class="icon">b</div>
  </div>
  <div class="box">
    <div class="title">c</div>
    <div class="code">#0099</div>
    <div class="icon">c</div>
  </div>
  <div class="box">
    <div class="title">d</div>
    <div class="code">#0100</div>
    <div class="icon">d</div>
  </div>
  <div class="box">
    <div class="title">g</div>
    <div class="code">#0103</div>
    <div class="icon">g</div>
  </div>
  <div class="box">
    <div class="title">i</div>
    <div class="code">#0105</div>
    <div class="icon">i</div>
  </div>
  <div class="box">
    <div class="title">o</div>
    <div class="code">#0111</div>
    <div class="icon">o</div>
  </div>
  <div class="box">
    <div class="title">p</div>
    <div class="code">#0112</div>
    <div class="icon">p</div>
  </div>
  <div class="box">
    <div class="title">q</div>
    <div class="code">#0113</div>
    <div class="icon">q</div>
  </div>
  <div class="box">
    <div class="title">S</div>
    <div class="code">#0115</div>
    <div class="icon">s</div>
  </div>
  <div class="box">
    <div class="title">v</div>
    <div class="code">#0118</div>
    <div class="icon">v</div>
  </div>
  <div class="box">
    <div class="title">w</div>
    <div class="code">#0119</div>
    <div class="icon">w</div>
  </div>
  <div class="box">
    <div class="title">x</div>
    <div class="code">#0120</div>
    <div class="icon">x</div>
  </div>
  <div class="box">
    <div class="title">y</div>
    <div class="code">#0121</div>
    <div class="icon">y</div>
  </div>
  <div class="box">
    <div class="title">z</div>
    <div class="code">#0122</div>
    <div class="icon">z</div>
  </div>
  <div class="box">
    <div class="title">0</div>
    <div class="code">#0048</div>
    <div class="icon">0</div>
  </div>
  <div class="box">
    <div class="title">1</div>
    <div class="code">#0049</div>
    <div class="icon">1</div>
  </div>
  <div class="box">
    <div class="title">2</div>
    <div class="code">#0050</div>
    <div class="icon">2</div>
  </div>
  <div class="box">
    <div class="title">3</div>
    <div class="code">#0051</div>
    <div class="icon">3</div>
  </div>
  <div class="box">
    <div class="title">4</div>
    <div class="code">#0052</div>
    <div class="icon">4</div>
  </div>
  <div class="box">
    <div class="title">5</div>
    <div class="code">#0053</div>
    <div class="icon">5</div>
  </div>
  <div class="box">
    <div class="title">6</div>
    <div class="code">#0054</div>
    <div class="icon">6</div>
  </div>
  <div class="box">
    <div class="title">7</div>
    <div class="code">#0055</div>
    <div class="icon">7</div>
  </div>
  <div class="box">
    <div class="title">8</div>
    <div class="code">#0056</div>
    <div class="icon">8</div>
  </div>
  <div class="box">
    <div class="title">9</div>
    <div class="code">#0057</div>
    <div class="icon">9</div>
  </div>
  <div class="box">
    <div class="title">$</div>
    <div class="code">#0036</div>
    <div class="icon">$</div>
  </div>
  <div class="box">
    <div class="title">+</div>
    <div class="code">#0043</div>
    <div class="icon">+</div>
  </div>
  <div class="box">
    <div class="title">-</div>
    <div class="code">#0045</div>
    <div class="icon">-</div>
  </div>
  <div class="box">
    <div class="title">*</div>
    <div class="code">#0042</div>
    <div class="icon">*</div>
  </div>
  <div class="box">
    <div class="title">/</div>
    <div class="code">#0047</div>
    <div class="icon">/</div>
  </div>
  <div class="box">
    <div class="title">=</div>
    <div class="code">#0061</div>
    <div class="icon">=</div>
  </div>
  <div class="box">
    <div class="title">%</div>
    <div class="code">#0037</div>
    <div class="icon">%</div>
  </div>
  <div class="box">
    <div class="title">"</div>
    <div class="code">#0034</div>
    <div class="icon">"</div>
  </div>
  <div class="box">
    <div class="title">'</div>
    <div class="code">#0039</div>
    <div class="icon">'</div>
  </div>
  <div class="box">
    <div class="title">#</div>
    <div class="code">#0035</div>
    <div class="icon">#</div>
  </div>
  <div class="box">
    <div class="title">@</div>
    <div class="code">#0064</div>
    <div class="icon">@</div>
  </div>
  <div class="box">
    <div class="title">&</div>
    <div class="code">#0038</div>
    <div class="icon">&</div>
  </div>
  <div class="box">
    <div class="title">_</div>
    <div class="code">#0095</div>
    <div class="icon">_</div>
  </div>
  <div class="box">
    <div class="title">(</div>
    <div class="code">#0040</div>
    <div class="icon">(</div>
  </div>
  <div class="box">
    <div class="title">)</div>
    <div class="code">#0041</div>
    <div class="icon">)</div>
  </div>
  <div class="box">
    <div class="title">,</div>
    <div class="code">#0044</div>
    <div class="icon">,</div>
  </div>
  <div class="box">
    <div class="title">></div>
    <div class="code">#0062</div>
    <div class="icon">></div>
  </div>
  <div class="box">
    <div class="title">[</div>
    <div class="code">#0091</div>
    <div class="icon">[</div>
  </div>
  <div class="box">
    <div class="title">]</div>
    <div class="code">#0093</div>
    <div class="icon">]</div>
  </div>
  <div class="box">
    <div class="title">^</div>
    <div class="code">#0094</div>
    <div class="icon">^</div>
  </div>
</div>
@font-face {
  font-family: 'GuifxIcon';
  src: url('Guifx/guifx_v2_transports-webfont.eot');
  src: url('Guifx/guifx_v2_transports-webfont.eot?#iefix') format('embedded-opentype'),
    url('Guifx/guifx_v2_transports-webfont.woff') format('woff'),
    url('Guifx/guifx_v2_transports-webfont.ttf') format('truetype'),
    url('Guifx/guifx_v2_transports-webfont.svg#Guifxv2TransportsRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icon {
  font-family: 'GuifxIcon';
}

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助: 支付鼓励

猜您喜欢

留下你的足迹