插入字体图标

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网 
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>case</title>
  8.     <link rel="stylesheet" href="icon.css">
  9. </head>
  10. <body>
  11.     <div class="box parent">
  12.         <div class="box child">
  13.             <span class="iconfont icon-elment index"></span>
  14.             <span class="iconfont icon-quanbudingdan order"></span>
  15.             <span class="iconfont icon-31wode my"></span>
  16.         </div>
  17.     </div>
  18. </body>
  19. </html>
  20. ``````css
  21. @import url('https://at.alicdn.com/t/c/font_3958347_byfo5e0zz4n.css');
  22. .box{
  23.     border: 1px solid blue;![三个字体图标](https://img.php.cn/upload/image/190/275/596/1679050213821360.png "三个字体图标")
  24.     background-color: lightgrey;
  25. }
  26. .box.parent{
  27.     width: 420px;
  28. }
  29. .box.child{
  30.     width: 375px;
  31.     height: 800rem;
  32.     margin-left: auto;
  33.     margin-right: auto;
  34.     margin-top: 20px;
  35.     border: none;
  36. }
  37. .index{
  38.     opacity: 0.6;
  39.     font-size: 2rem;
  40.     color: #707070;
  41.     margin-top: 20px;
  42.     margin-left: 1rem;
  43. }
  44. .order{
  45.     opacity: 0.6;
  46.     font-size: 2rem;
  47.     color: #707070;
  48.     margin-top: 20px;
  49.     margin-left: 0.7em;
  50.     margin-right: 0.7em;
  51. }
  52. .my{
  53.     opacity: 0.6;
  54.     font-size: 2rem;
  55.     color: #707070;
  56.     margin-top: 20px;
  57.     /* margin-left: 16px; */
  58.     margin-right: 16px;
  59. }
  60. .iconfont:hover{
  61.     opacity: 1;
  62.     font-size: 2.2rem;
  63.     color: #00aaff;
  64.     cursor: pointer;
  65.     transition: 0.3s;
  66. }
  67. @media (max-width:500px) {
  68.     html{
  69.         font-size: 1.8rem;
  70.     }
  71. }
  72. @media (min-width:500px) and (max-width:800px){
  73.     html{
  74.         font-size: 2rem;
  75.     }
  76. }
  77. @media (min-width:800px) {
  78.     html{
  79.         font-size: 2.5rem;
  80.     }
  81. }
插入3个字体图标

字体图标

图标选中后变亮

字体图标2

屏幕宽度499px时图标高度63.33px

字体图标3

屏幕宽度500px时图标高度70px

字体图标4

总结：

字体图标挺有趣的，应该再介绍一下下载后插入字体图标的方法。

【文章原创作者：滨海网页设计 http://www.1234xp.com/binhai.html 复制请保留原URL】
更多阅读