demo_index.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>IconFont Demo</title>
  6. <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  7. <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  8. <link rel="stylesheet" href="demo.css">
  9. <link rel="stylesheet" href="iconfont.css">
  10. <script src="iconfont.js"></script>
  11. <!-- jQuery -->
  12. <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  13. <!-- 代码高亮 -->
  14. <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  15. </head>
  16. <body>
  17. <div class="main">
  18. <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
  19. <div class="nav-tabs">
  20. <ul id="tabs" class="dib-box">
  21. <li class="dib active"><span>Unicode</span></li>
  22. <li class="dib"><span>Font class</span></li>
  23. <li class="dib"><span>Symbol</span></li>
  24. </ul>
  25. </div>
  26. <div class="tab-container">
  27. <div class="content unicode" style="display: block;">
  28. <ul class="icon_lists dib-box">
  29. <li class="dib">
  30. <span class="icon iconfont">&#xe630;</span>
  31. <div class="name">圆点</div>
  32. <div class="code-name">&amp;#xe630;</div>
  33. </li>
  34. </ul>
  35. <div class="article markdown">
  36. <h2 id="unicode-">Unicode 引用</h2>
  37. <hr>
  38. <p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
  39. <ul>
  40. <li>兼容性最好,支持 IE6+,及所有现代浏览器。</li>
  41. <li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
  42. <li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
  43. </ul>
  44. <blockquote>
  45. <p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p>
  46. </blockquote>
  47. <p>Unicode 使用步骤如下:</p>
  48. <h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
  49. <pre><code class="language-css"
  50. >@font-face {
  51. font-family: 'iconfont';
  52. src: url('iconfont.eot');
  53. src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  54. url('iconfont.woff2') format('woff2'),
  55. url('iconfont.woff') format('woff'),
  56. url('iconfont.ttf') format('truetype'),
  57. url('iconfont.svg#iconfont') format('svg');
  58. }
  59. </code></pre>
  60. <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
  61. <pre><code class="language-css"
  62. >.iconfont {
  63. font-family: "iconfont" !important;
  64. font-size: 16px;
  65. font-style: normal;
  66. -webkit-font-smoothing: antialiased;
  67. -moz-osx-font-smoothing: grayscale;
  68. }
  69. </code></pre>
  70. <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
  71. <pre>
  72. <code class="language-html"
  73. >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
  74. </code></pre>
  75. <blockquote>
  76. <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
  77. </blockquote>
  78. </div>
  79. </div>
  80. <div class="content font-class">
  81. <ul class="icon_lists dib-box">
  82. <li class="dib">
  83. <span class="icon iconfont icon-yuandian"></span>
  84. <div class="name">
  85. 圆点
  86. </div>
  87. <div class="code-name">.icon-yuandian
  88. </div>
  89. </li>
  90. </ul>
  91. <div class="article markdown">
  92. <h2 id="font-class-">font-class 引用</h2>
  93. <hr>
  94. <p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
  95. <p>与 Unicode 使用方式相比,具有如下特点:</p>
  96. <ul>
  97. <li>兼容性良好,支持 IE8+,及所有现代浏览器。</li>
  98. <li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
  99. <li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
  100. <li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
  101. </ul>
  102. <p>使用步骤如下:</p>
  103. <h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
  104. <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
  105. </code></pre>
  106. <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
  107. <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
  108. </code></pre>
  109. <blockquote>
  110. <p>"
  111. iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
  112. </blockquote>
  113. </div>
  114. </div>
  115. <div class="content symbol">
  116. <ul class="icon_lists dib-box">
  117. <li class="dib">
  118. <svg class="icon svg-icon" aria-hidden="true">
  119. <use xlink:href="#icon-yuandian"></use>
  120. </svg>
  121. <div class="name">圆点</div>
  122. <div class="code-name">#icon-yuandian</div>
  123. </li>
  124. </ul>
  125. <div class="article markdown">
  126. <h2 id="symbol-">Symbol 引用</h2>
  127. <hr>
  128. <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
  129. 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
  130. <ul>
  131. <li>支持多色图标了,不再受单色限制。</li>
  132. <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
  133. <li>兼容性较差,支持 IE9+,及现代浏览器。</li>
  134. <li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
  135. </ul>
  136. <p>使用步骤如下:</p>
  137. <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
  138. <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
  139. </code></pre>
  140. <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
  141. <pre><code class="language-html">&lt;style&gt;
  142. .icon {
  143. width: 1em;
  144. height: 1em;
  145. vertical-align: -0.15em;
  146. fill: currentColor;
  147. overflow: hidden;
  148. }
  149. &lt;/style&gt;
  150. </code></pre>
  151. <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
  152. <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  153. &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
  154. &lt;/svg&gt;
  155. </code></pre>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. <script>
  161. $(document).ready(function () {
  162. $('.tab-container .content:first').show()
  163. $('#tabs li').click(function (e) {
  164. var tabContent = $('.tab-container .content')
  165. var index = $(this).index()
  166. if ($(this).hasClass('active')) {
  167. return
  168. } else {
  169. $('#tabs li').removeClass('active')
  170. $(this).addClass('active')
  171. tabContent.hide().eq(index).fadeIn()
  172. }
  173. })
  174. })
  175. </script>
  176. </body>
  177. </html>