Twitter bootstrap 3.0 图标在折叠时发生变化 [英] Twitter bootstrap 3.0 icon change on collapse

问题描述

这是关于 Bootstrap 3.0.我希望图标/字形在折叠时发生变化.即，从关闭的文件夹到打开的文件夹.

This is about Bootstrap 3.0. I would like the icon/glyphicon to change on collapse. I.e, from a closed folder to an open one.

我进行了广泛的搜索，并在此处阅读了有关 SO 的主题，但无济于事.这个话题很接近，基本上就是我想.如何让它在 Bootstrap 3 中工作?

I have searched far and wide, and have read threads here on SO, but to no avail. This thread was close, and is basically what I want. How can I make it work in Bootstrap 3?

推荐答案

这是一个基于 CSS 的解决方案，它依赖于默认的 bootstrap.js 折叠实现.不需要额外的 HTML 标记(当然，可以随意用字形替换 Font-Awesome).

This is a CSS-based solution that relies on the default bootstrap.js collapse implementation. No additional HTML markup required (feel free to replace Font-Awesome with glyphicons, of course).

<style>
    .panel-title > a:before {
        font-family: FontAwesome;
        content: "f07c";
        padding-right: 5px;
    }
    .panel-title > a.collapsed:before {
        content: "f07b";
    }
</style>

演示(引导程序 3.3.7):

演示(Bootstrap 4.0/Font Awesome 5 CSS):

这篇关于Twitter bootstrap 3.0 图标在折叠时发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！