icon踩坑记录

最新推荐文章于 2023-09-14 17:03:12 发布

weixin_30655569

最新推荐文章于 2023-09-14 17:03:12 发布

阅读量128

点赞数

原文链接：http://www.cnblogs.com/wangtao-/p/9456212.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <link rel="stylesheet" href="icon.css">
10 </head>
11 
12 <body>
13     <h2 style="color: red;">注意：上下两列内容是一样的</h2>
14     <p class="icon">
15         <span style="color: red;">x</span>
16     </p>
17 
18     <p>
19         <i class="icon"></i>
20         <span style="color: red;">x</span>
21     </p>
22 
23 </body>
24 
25 </html>

页面效果显示如下：

问题用法

1 <p class="icon">
2    <span style="color: red;">x</span>
3 </p>

改后用法

1 <p>
2    <i class="icon"></i>
3    <span style="color: red;">x</span>
4 </p>

也就是说，iconfont元素里边避免在使用文案，所有图标使用最小元素去处理

结论：

使用iconfont元素的内部，避免使用文案。规范iconfont用法~

转载于:https://www.cnblogs.com/wangtao-/p/9456212.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30655569

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
icon踩坑记录

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫