欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

icon图标

程序员文章站 2022-05-01 22:17:37
...

https://www.iconfont.cn/

icon图标
icon图标

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8. 

  8.     <title>图标</title>
    9. 

  9.     <!-- 第一步，引入图标的css -->
    10. 

  10.     <link rel="stylesheet" href="./css/iconfont.css" />
    11. 

  11.     <link rel="stylesheet" href="./css1/iconfont.css" />
    12. 

  12. </head>
    13. 

  13. <!-- 第二步，引用图标class -->
    14. 

    15. 

  15. <body>
    16. 

  16.     <span class="iconfont icon-attachment"></span>
    17. 

  17.     <span class="iconfont icon-camera"></span>
    18. 

  18.     <span class="iconfont icon-a-03-01 like"></span>
    19. 

  19.     <span class="iconfont icon-a-21-01 like1"></span>
    20. 

    21. 

  21.     <style>
    22. 

  22.         .iconfont.icon-attachment {
    23. 

  23.             font-size: 80px;
    24. 

  24.             color: rgb(71, 114, 255);
    25. 

  25.         }
    26. 

    27. 

  27.         .iconfont.icon-camera {
    28. 

  28.             font-size: 70px;
    29. 

  29.             color: rgb(18, 223, 46);
    30. 

  30.         }
    31. 

    32. 

  32.         .like {
    33. 

  33.             font-size: 60px;
    34. 

  34.             color: green;
    35. 

  35.         }
    36. 

    37. 

  37.         .like1 {
    38. 

  38.             font-size: 90px;
    39. 

  39.             color: rgb(058, 237, 160);
    40. 

  40.         }
    41. 

  41.         /* .iconfont.icon-camera {
    42. 

  42.             font-size: 80px;
    43. 

  43.             color: tomato;
    44. 

  44.         } */
    45. 

  45.     </style>
    46. 

  46. </body>
    47. 

    48. 

  48. </html>
    49.

上一篇： 8应用协议

下一篇： 6.2端口号

推荐阅读