CSS伪元素:before/CSS伪元素:before/:after content 显示Font Awesome字体图标:after content 显示Font Awesome字体图标...

最新推荐文章于 2024-08-09 16:06:18 发布

weixin_34221773

最新推荐文章于 2024-08-09 16:06:18 发布

阅读量1.1k

点赞数 1

文章标签： javascript ViewUI

本文介绍了一种使用CSS在radio按钮旁边显示图标字体的方法，通过:checked伪类和before伪元素实现，确保了字体图标能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<a href="javascript:volid(0);"><i class="icon-table"></i>表格</a>

CSS

input[type="radio"]:checked + label:before {
                content: "\e659"; // iconfont格式，打开iconfont.css文件里面可以找到
                position: absolute;
                left: 31px;
                top: 2px;
                font-family: "iconfont" !important; // 一定要设置font-family：“iconfont”不然字体无法出来
                color: #2070F7;
                font-size: 14px;
                line-height: 42px;
              }

控制台查看：