查看: 2400|回复: 0

[DIV/CSS] 用字体在网页中画ICON图标笔记总结

发表于 2018-2-13 08:00:02

图片描述
图片描述
链接:https://icomoon.io
代码链接:
https://gitee.com/sxianyuan/codes/v2l43w89u0djzoqr1a6gh95

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用字体在网页中画ICON图标</title>
  6. <style type="text/css">
  7. li,ul{list-style:none}li{display:inline-block;margin:20px}a{display:block;margin:10px;text-decoration:none;color:#67006d;font-weight:700;font-size:18px}
  8. @font-face{
  9. font-family:"imooc-icon";
  10. src:url('fonts/icomoon.eot');/* IE9兼容模式 */
  11. src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* ie8 */
  12. url('fonts/icomoon.woff') format('woff'),
  13. url('fonts/icomoon.ttf') format('truetype'),
  14. url('fonts/icomoon.svg') format('svg');
  15. font-weight:normal;
  16. font-style:normal;
  17. }
  18. .imooc-icon{
  19. font-family:"imooc-icon";
  20. font-style: normal;
  21. font-weight: normal;
  22. font-size: 100px;
  23. -webki-t-font-smoothing:antialiased;
  24. -moz-osx-font-smoothing:grayscale;
  25. }
  26. .imooc-1{
  27. content: "\e906";
  28. }
  29. .imooc-2{
  30. position: relative;
  31. }
  32. .imooc-2:before{
  33. content: "\e902";
  34. }
  35. .imooc-2:after{
  36. content: "\e903";
  37. position: absolute;
  38. top:0;
  39. left:0;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <h2>用字体在网页中画ICON图标</h2>
  45. <h4>链接:<a href="https://icomoon.io" target="_blank">https://icomoon.io</a></h4>
  46. <ul>
  47. <li><i style="color: red;" class="imooc-icon">?</i></li>
  48. <li><i style="color: green;" class="imooc-icon">?</i></li>
  49. <li><i style="font-size: 50px;" class="imooc-icon">?</i></li>
  50. <li><i class="imooc-icon">?</i></li>
  51. <li><i class="imooc-icon">?</i></li>
  52. <li><i class="imooc-icon">?</i></li>
  53. <li><i class="imooc-icon imooc-1"></i></li>
  54. <li><i class="imooc-icon imooc-2"></i></li>
  55. <li><i class="imooc-icon imooc-3"></i></li>
  56. </ul>
  57. <h4>参考链接</h4>
  58. <a href="http://www.iconfont.cn">http://www.iconfont.cn</a>
  59. <a href="http://fontello.com/">http://fontello.com/</a>
  60. <a href="http://fontawesome.io/">http://fontawesome.io/</a>
  61. <a href="http://flowerboys.cn/font/">http://flowerboys.cn/font/</a>
  62. <a href="http://www.w3cplus.com/css3/how-to-turn-your-icons-into-a-web-font.html">http://www.w3cplus.com/css3/how-to-turn-your-icons-into-a-web-font.html</a>
  63. </body>
  64. </html>
复制代码


回复

使用道具 举报