bootstrap利用Font Awesome给选择添加checkbox图标

最新推荐文章于 2024-08-13 08:16:21 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2024-08-13 08:16:21 发布

阅读量3.5k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/wstpa/article/details/50482549

版权

Bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍如何结合Bootstrap与Font Awesome库，在选择项旁边添加复选框图标，实现鼠标悬停时显示打勾的效果。通过提供的代码示例，读者可以了解到具体的实现方法。

摘要由CSDN通过智能技术生成

实现效果：鼠标移入打钩

这里写图片描述

代码：

a {
                .btn;  //给a,应用.btn样式，
                .btn-sm;
                padding-left: 0;
                padding-right: 0;
                color: @gray;
                &:hover,
                &:focus,
                &:active,
                .active & {
                    color: @link-color;
                }

                &:before{  //添加checkbox
                    .icon-FontAwesome();
                    text-decoration: inherit;
                    display: inline-block;
                    speak: none;
                    content: @check-empty;
                    width: 16/14em;
                    text-align: right;
                }
                &:hover:before,  //鼠标移入打钩
                &:focus:before,
                &:active:before,
                .active &:before {
                    content: @check;
                } 
            }