1

There are numerous posts about this but solutions given thus far don't work for me:

Using Font Awesome 5 Free version from a CDN. I've set up a fiddle here: https://jsfiddle.net/ej2r8kpy/

This renders icons properly. For example using the markup:

<i class="fas fa-bullhorn fa-2x" aria-hidden="true"></i>

I get this:

enter image description here

This is correct so I know Font Awesome is working.

I'm trying to change the breadcrumb separator in Bootstrap 4 from the default " / " to a Font Awesome icon.

So, I've tried some solutions such as:

.breadcrumb-item+.breadcrumb-item::before {
    font-family: "Font Awesome\ 5 Free";
    content: "\f105";
}

In the above case, \f105 is the Unicode copied from the icon I want: https://fontawesome.com/icons/angle-right?style=solid

However, when I use this in breadcrumbs it renders without the icon and a "square" which is what happens when it can't render Font Awesome icons:

enter image description here

The updated markup is here: https://jsfiddle.net/ej2r8kpy/1/

Why is this not working?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Andy
  • 5,142
  • 11
  • 58
  • 131
  • Where are you loading the font in the fiddle? – Paulie_D Jun 07 '19 at 14:14
  • @Paulie_D click on the Resources tab and you'll see it's loading `https://use.fontawesome.com/releases/v5.8.2/js/all.js` This is all Font Awesome supply as their way to use it from a CDN (no `.css` files are included) – Andy Jun 07 '19 at 14:15
  • The right angle is appearing for me in your fiddle. You could try adding the `font-weight` property - as I think the free version of font awesome might require it. – disinfor Jun 07 '19 at 14:21
  • That's really odd. It works in Firefox but not Chrome – Andy Jun 07 '19 at 14:25
  • @Andy: It doesn't work for me in Firefox Developer edition FYI. – Adrift Jun 07 '19 at 14:28
  • 2
    https://jsfiddle.net/8xozrvau/ (1) font-weight issue (first duplicate) (2) JS issue with pseudo element (second duplicate) – Temani Afif Jun 07 '19 at 14:38
  • @Adrift can you explain why you reponed the question? ... all the details are within the duplcate (including the display:none) – Temani Afif Jun 07 '19 at 14:41
  • It was a mistake, I closed it again with the relevant duplicate question. Sorry. – Adrift Jun 07 '19 at 14:43

0 Answers0