Usage with FontAwesome v5 about awesome-bootstrap-checkbox HOT 14 CLOSED

Using less to set the font family to "Font Awesome 5 Free" still leaves it not working.

The font-weight, also needs to be overridden to be 900 (at least for the free version). Based on my checking, as low as 600 will also work, but why complicate things.

This should either be changed in the project, or added as a variable for less/sass users (or both)

from awesome-bootstrap-checkbox.

This helped me to restore checkbox.

In CSS

.abc-checkbox input[type="checkbox"]:checked+label::after,
.abc-checkbox input[type="radio"]:checked+label::after {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    content: "\f00c";
    font-weight: 900;
}

In HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

from awesome-bootstrap-checkbox.

The font-weight needs to be 900

from awesome-bootstrap-checkbox.

While this works with the CSS version of FA5:

.abc-checkbox input[type="checkbox"]:checked+label::after,
.abc-checkbox input[type="radio"]:checked+label::after {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    content: "\f00c";
    font-weight: 900;
}

it does not work if you're using the FA5 Pro JS/SVG option. Any one got any thoughts on that one?

from awesome-bootstrap-checkbox.

The main resaon for this problem is the font-family not work in Font Awesome 5, change to Font Awesome 5 Free or Font Awesome 5 Pro is OK.
I wander why they want to change the name . WTF

from awesome-bootstrap-checkbox.

Hi!

Try this:

.abc-checkbox input[type="checkbox"]:checked + label::after,
.abc-checkbox input[type="radio"]:checked + label::after {
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  content: "\f00c"; }

ps I use Font Awesome 5 Pro

from awesome-bootstrap-checkbox.

Hi,

It's work with awesome-boostrap-checkbox 0.3.7 ?

I try:

.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
}

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
}

But doesn't work :(

from awesome-bootstrap-checkbox.

I'm using Font Awesome 5 and importing the fa-check icon with the following code on app.module.ts

import {faCheck} from '@fortawesome/fontawesome-free-solid';
fontawesome.library.add(faCheck);

The icon is shown without problem using a classic HTML tag in the templates of any component, even lazy loaded ones.
<span class="fas fa-check"></span>

... but Font Awesome 5 for Angular uses JS and SVG internally instead of a font, so the suggested workaround doesn't fix the problem with abc-checkbox, in this case.

At the end I've used https://icomoon.io to export just the fa-check icon in a font, imported that and changed the above workaround to use my single icon font.

from awesome-bootstrap-checkbox.

You can use web fonts with font awesome. The package has the fonts and css in the web-fonts-with-css folder.

from awesome-bootstrap-checkbox.

@ellenhutchings is it possible to import only the needed fa-check icon icon from the web-fonts-with-css folder?

from awesome-bootstrap-checkbox.

I tried @NightMan-1 's solution but it didn't work. I was on AngularJS btw... Strangely the plugin works perfectly on Angular5 🤔

from awesome-bootstrap-checkbox.

But doesn't work ,too :(

from awesome-bootstrap-checkbox.

WIthout the actual fonts and classes the checkbox stuff won't work. Awesome bootstrap checkbox uses web fonts, and already has the check icon information

from awesome-bootstrap-checkbox.

This works for me scss

$font-family-icon: 'Font Awesome 5 Free';
$fa-var-check: "\f00c";
@import '~awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss';
.checkbox input[type="checkbox"]:checked+label::after,
.checkbox input[type="radio"]:checked+label::after {
  font-weight: 600;
}

from awesome-bootstrap-checkbox.