0

I'm using Bootstrap 3.3.7 and FontAwesome 5.0.8. Both are being served from a CDN:

I want to change the Bootstrap separator on its breadcrumbs, so have done this. The icon I want to use is a right arrow (https://fontawesome.com/icons/arrow-right?style=solid):

.breadcrumb-item::before{
    font-family: 'FontAwesome';
    content: "\f061" !important;
}

But it just renders as a square, indicating the icon can't be used:

enter image description here

What do I need to do to make this work?

I have adapted my CSS to use the "Glyphicons Halflings" that Bootstrap has with the following CSS. This works no problem:

.breadcrumb-item::before{
    font-family: 'Glyphicons Halflings';
    content: "\e092" !important;
}

So I don't think there's any issue with how I'm targeting the breadcrumbs, but still unsure what the problem is.

There are no 404 errors or resources not being loaded, or console errors, etc.

Community
  • 1
  • 1
Andy
  • 5,142
  • 11
  • 58
  • 131
  • the first dup will show you the correct font to use .. the second one will explain the font-weight trick ... and the third one how to use pseudo element with the JS version – Temani Afif Jul 02 '18 at 09:52
  • It doesn't work. If I use `font-family: "Font Awesome 5 Solid"; font-weight: 900;` that still gives the same problem. – Andy Jul 02 '18 at 09:56
  • because the font-family is wrong [it(s Free], check the first duplicate for this ;) [the answer not the question] ... and if you are using the JS version you need to also check the last duplicate to understand how to deal with pseudo elements – Temani Afif Jul 02 '18 at 10:00
  • I don't think it is a duplicate because none of that works. I'll stick with the Glyphicons because there's no way this should be so complicated. Having to piece together info from 3 different sources just to do that is ridiculous. Forget it. – Andy Jul 02 '18 at 10:09
  • If it's ridiculous for you to understand your issue and to take no more than 5 min to read and understand how the new font-awsome version work you are free ... you have 3 issue explained well on the 3 duplicates, it's will not take you more than 2mins to read each one and understand the font-family, the font-weight and the pseudo element ... I suppose you didn't also read the documentation of the V5, because also there everything is explained well : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements – Temani Afif Jul 02 '18 at 10:17
  • I'm not going to argue the point, but essentially look how easy it is with Glyphicons. All you should be required to do is specify the font family and the `content:` in your CSS. If it's more complex than that, the failure is not on the end-user/developer, but the people who think it's appropriate to make something simple so convoluted. No, I'll stick with Glyphicons and put my time into something worthy of it. Incidentally if anyone does want to post a clear answer rather than rant about whether I have or haven't read some docs, feel free to post. – Andy Jul 02 '18 at 10:25
  • I have already written 3 clear answers with working codes and explanation. And I gave you a link to the need page of the documentation that also contains a running code ... I don't think we can do better, we cannot also control how complex is the process using FA, we can simply explain how to do then you are free to choose the option you think is the best – Temani Afif Jul 02 '18 at 10:35
  • Working fine here Andy... http://jsfiddle.net/amfn5ub7/1/ – Derek Nolan Jul 02 '18 at 14:54

0 Answers0