代码:
<!-- 高频:使用font class引用字体图标 --> <!DOCTYPE html> <html lang="en"> <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> <!-- 第一步 引入iconfont.css文件 --> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> /* 第三步 声明字体图标库 */ i { font-family: iconfont; } /* 使用新类名设置样式 避免权重不同 样式无法生效 */ .icon1{ color: orange; } .icon2{ color: red; } a { display: block; color: black; width: 200px; height: 100px; text-decoration: none; background-color: #fff; text-align: center; line-height: 100px; margin: 100px auto; } </style> </head> <body> <a href="#"> <!-- 第二步 用i标签承接font class--> <!-- 使用格式:class="iconfont 字体图标类名" --> <i class="iconfont icon-gouwucheman1 icon1"></i> <span>购物车</span> <i class="iconfont icon-xiangxia icon2"></i> </a> </body> </html>
效果图:
移动web-字体图标-案例-使用font class引用字体图标
最新推荐文章于 2024-09-13 17:21:46 发布