search

博客列表 >字体图标的使用

字体图标的使用

len
len原创
2023年03月17日 15:16:38311浏览

程序实现

  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>字体图标的使用</title>
  8.     <link
  9.       rel="stylesheet"
  10.       href="//at.alicdn.com/t/c/font_3958903_50kcu2wlrhj.css"
  11.     />
  12.   </head>
  13.   <style>
  14.     * {
  15.       box-sizing: border-box;
  16.       padding: 0;
  17.       margin: 0;
  18.     }
  19.     .icon-a-business-icon-Bigpromotion {
  20.       color: aqua;
  21.       font-size: 2em;
  22.       /* margin-left: 100px; */
  23.     }
  24.     .icon-cart-empty,
  25.     .icon-cart-empty-fill {
  26.       color: skyblue;
  27.       font-size: 2em;
  28.     }
  29.     .empty {
  30.       font-size: 14px;
  31.     }
  32.     .catalog {
  33.       color: green;
  34.       font-size: 2rem;
  35.     }
  36.     html {
  37.       font-size: 18px;
  38.     }
  39.     .icon-customer-businessman-fill:hover {
  40.       color: red;
  41.       cursor: pointer;
  42.       font-size: 2em;
  43.       transition: 0.3s;
  44.     }
  45.     .icon-hot-for-ux-fill:hover {
  46.       display: inline-block;
  47.       width: 20vw;
  48.       height: 20vh;
  49.       transition: 2s;
  50.       background-color: lightgreen;
  51.       cursor: pointer;
  52.     }
  53.   </style>
  54.   <body>
  55.     <ul>
  56.       <li class="business">
  57.         <span class="iconfont icon-a-business-icon-Bigpromotion">business</span>
  58.       </li>
  59.       <li class="cart empty">
  60.         <span class="iconfont icon-cart-empty">cart empty</span>
  61.       </li>
  62.       <li class="cart fill">
  63.         <span class="iconfont icon-cart-empty-fill">cart full</span>
  64.       </li>
  65.       <li class="catalog">
  66.         <span class="iconfont icon-catalog">catalog</span>
  67.       </li>
  68.       <li class="businessman">
  69.         <span class="iconfont icon-customer-businessman-fill">businessman</span>
  70.       </li>
  71.       <li class="hot fill">
  72.         <span class="iconfont icon-hot-for-ux-fill">hot fill</span>
  73.       </li>
  74.       <li class="hot atmosphere">
  75.         <span class="iconfont icon-hot-for-atmosphere">hot atmosphere</span>
  76.       </li>
  77.     </ul>
  78.   </body>
  79. </html>

效果图

效果1

字体图标效果1

效果2

字体图标效果2

注意点

  • font-size 不能被继承
  • 如果iconfont.cn网站上项目删了，是不是图标就失效了？
上一条：icon font 和媒体查询的运用下一条：图标的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多