Bootstrap-select: Font Awesome 5.x

Created on 23 Jan 2018 · 7Comments · Source: snapappointments/bootstrap-select

Hello guys.

I'm using bootstrap-select v1.12.4, bootstrap 3.3.7 and font-asesome 5.0.3 in ubuntu and firefox. My multiples select with tick looks really odd. All ticks are shown, even when any options is selected. I'll attach a scrrenshot.

It used to work great with font-awesome 4.x. So I asume it's a problem with FA 5.x. Is it going to be supported?

screenshot from 2018-01-23 10-29-12

Source

injaon

Most helpful comment

Confirmed migliori's approach works, there are two locations to modify in the CSS leaving you with the following:

<style>
.bootstrap-select .dropdown-menu li a .check-mark {
  display: none;
}
.bootstrap-select.show-tick .dropdown-menu .selected .check-mark {
  position: absolute;
  display: inline-block;
  right: 15px;
  top: 5px;
}
</style>

This should be applied to the next minor version.

adamgp on 6 May 2019

👍2

All 7 comments

Hello,

I have the same problem with font-awesome v5.x and bootstrap-select-v4 / bootstrap-select.

The new version of font-awesome replaces the fa i-tags with inline-SVG pendants, i.e:

<i class="fa fa-home fa-fw" aria-hidden="true"></i>

will become

Therefore the CSS and JS doesn't work for the transformed item and all ticks are show, even when "show-tick" is not added to the selectpicker class.

Could someone give feedback if this will be fixed and / or when?

kunzai on 30 Jan 2018

Do you load the scripts from the CDN ?
I really would download it and then refer to a local file instead of the cdn.
No troubles at all so far. (boostrap 3.3.7 and bootstrap select newest version).

fskale on 1 Feb 2018

Use the FontAwesome 5 – Web Fonts with CSS approach; this will not convert your tags to SVG code.

akalt on 9 Feb 2018

Use the FontAwesome 5 – Web Fonts with CSS approach; this will not convert your tags to SVG code.

@akalt it's true. it works. Thanks! I'm closing the issue.

injaon on 9 Feb 2018

@injaon – I appreciate that the CCS approach works, but it seems like a backward step to give up the benefits of SVG-based icons over font-based icons, particularly in locked-down environments where custom fonts tend to not work reliably. Thought I would pose the question here before opening another issue for Font Awesome's SVG-based icons.

scopendo on 31 Oct 2018

👍2

Hi,

Got the same problem, it can be fixed easily with removing the 'span' from the css selector:
span.check-mark => .check-mark in bootstrap-select.css

May this change be included in the next incoming versions?

migliori on 3 Nov 2018

👍1

Confirmed migliori's approach works, there are two locations to modify in the CSS leaving you with the following:

<style>
.bootstrap-select .dropdown-menu li a .check-mark {
  display: none;
}
.bootstrap-select.show-tick .dropdown-menu .selected .check-mark {
  position: absolute;
  display: inline-block;
  right: 15px;
  top: 5px;
}
</style>

This should be applied to the next minor version.

adamgp on 6 May 2019

👍2

Was this page helpful?

0 / 5 - 0 ratings