No Description

demo_fontclass.html 3.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>IconFont</title>
  6. <link rel="stylesheet" href="demo.css">
  7. <link rel="stylesheet" href="iconfont.css">
  8. </head>
  9. <body>
  10. <div class="main markdown">
  11. <h1>IconFont 图标</h1>
  12. <ul class="icon_lists clear">
  13. <li>
  14. <i class="icon iconfont icon-icon"></i>
  15. <div class="name">手机</div>
  16. <div class="fontclass">.icon-icon</div>
  17. </li>
  18. <li>
  19. <i class="icon iconfont icon-weixin"></i>
  20. <div class="name">微信</div>
  21. <div class="fontclass">.icon-weixin</div>
  22. </li>
  23. <li>
  24. <i class="icon iconfont icon-icon1"></i>
  25. <div class="name">用户名</div>
  26. <div class="fontclass">.icon-icon1</div>
  27. </li>
  28. <li>
  29. <i class="icon iconfont icon-qq"></i>
  30. <div class="name">qq</div>
  31. <div class="fontclass">.icon-qq</div>
  32. </li>
  33. <li>
  34. <i class="icon iconfont icon-email-outline"></i>
  35. <div class="name">email-outline</div>
  36. <div class="fontclass">.icon-email-outline</div>
  37. </li>
  38. </ul>
  39. <h2 id="font-class-">font-class引用</h2>
  40. <hr>
  41. <p>font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。</p>
  42. <p>与unicode使用方式相比,具有如下特点:</p>
  43. <ul>
  44. <li>兼容性良好,支持ie8+,及所有现代浏览器。</li>
  45. <li>相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。</li>
  46. <li>因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。</li>
  47. <li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
  48. </ul>
  49. <p>使用步骤如下:</p>
  50. <h3 id="-fontclass-">第一步:引入项目下面生成的fontclass代码:</h3>
  51. <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
  52. <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
  53. <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
  54. <blockquote>
  55. <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p>
  56. </blockquote>
  57. </div>
  58. </body>
  59. </html>