代码:
<!-- 常用:使用Unicode编码引用字体图标 --> <!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; } i:first-child{ color: orange; } 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标签承接Unicode编码 --> <i></i> <span>购物车</span> <i></i> </a> </body> </html>
效果图:
移动web-字体图标-案例-使用Unicode编码引用字体图标
最新推荐文章于 2024-04-18 06:44:12 发布