程序实现
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>字体图标的使用</title> <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3958903_50kcu2wlrhj.css" /> </head> <style> * { box-sizing: border-box; padding: 0; margin: 0; } .icon-a-business-icon-Bigpromotion { color: aqua; font-size: 2em; /* margin-left: 100px; */ } .icon-cart-empty, .icon-cart-empty-fill { color: skyblue; font-size: 2em; } .empty { font-size: 14px; } .catalog { color: green; font-size: 2rem; } html { font-size: 18px; } .icon-customer-businessman-fill:hover { color: red; cursor: pointer; font-size: 2em; transition: 0.3s; } .icon-hot-for-ux-fill:hover { display: inline-block; width: 20vw; height: 20vh; transition: 2s; background-color: lightgreen; cursor: pointer; } </style> <body> <ul> <li class="business"> <span class="iconfont icon-a-business-icon-Bigpromotion">business</span> </li> <li class="cart empty"> <span class="iconfont icon-cart-empty">cart empty</span> </li> <li class="cart fill"> <span class="iconfont icon-cart-empty-fill">cart full</span> </li> <li class="catalog"> <span class="iconfont icon-catalog">catalog</span> </li> <li class="businessman"> <span class="iconfont icon-customer-businessman-fill">businessman</span> </li> <li class="hot fill"> <span class="iconfont icon-hot-for-ux-fill">hot fill</span> </li> <li class="hot atmosphere"> <span class="iconfont icon-hot-for-atmosphere">hot atmosphere</span> </li> </ul> </body></html>
效果图
效果1
效果2
注意点
- font-size 不能被继承
- 如果iconfont.cn网站上项目删了，是不是图标就失效了？
