Utilizing the sleek FontAwesome Pro icons alongside the versatile Bootstrap 4 breadcrumbs

I have searched for a solution to this question multiple times, but none of the answers I find seem to work. For example, Bootstrap modify breadcrumb with fontawesome icon separator with SASS

My setup includes Font Awesome 5 Pro (from their CDN, kit.fontawesome.com) and Bootstrap 4.0.0

The task at hand is to replace the default Bootstrap 4 breadcrumb separator with a FontAwesome icon.

The following is my markup:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
</nav>

Despite trying the suggested solutions, the rendering is not as expected - only displaying a "square".

I am attempting to use the unicode f061, expecting a "right arrow", referenced here: https://fontawesome.com/icons/arrow-right

Here are some examples -

.breadcrumb-item + .breadcrumb-item::before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f061";
}

https://i.sstatic.net/yps33.png

.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f061";
    font-weight: 900;
}

https://i.sstatic.net/bpRX4.png

It is worth mentioning that icons render correctly when placed inside the document using 

<i class="fas fa-arrow-right"></i>
. The issue lies in referencing it within the CSS where the icon does not display. There are no 404 errors or resource loading problems.

What could be the reason behind this issue?

csstwitter-bootstrapbootstrap-4font-awesome-5

Answer №1

Make sure to use a bolder right arrow by adding font-weight:900.

Check out the snippet code in my response, it should work perfectly.

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f061";
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://kit.fontawesome.com/a35ed2bddb.js" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
  </nav>
</body>
</html>

Answer №2

To implement this icon, you will need to utilize the "Font Awesome\ 5 Free" font family. It is important to note that the use of \ and specifying the font-weight are both necessary...

.breadcrumb-item + .breadcrumb-item:before {
    font-family: 'Font Awesome\ 5 Free';
    content: "\f061";
    font-weight: 900;
}

Answer №3

It's possible that the css file for solid type is not included in your project. Here is how I have defined it in mine:

@import '../node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss';
@import '../node_modules/@fortawesome/fontawesome-pro/scss/solid.scss';
@import '../node_modules/@fortawesome/fontawesome-pro/scss/light.scss';
@import '../node_modules/@fortawesome/fontawesome-pro/scss/regular.scss';

Answer №4

Kindly verify the Rendered Font in the computed section to ensure that your CSS is not being overridden by other styles.

https://i.sstatic.net/F7X6H.png

Answer №5

Have you attempted utilizing the !important declaration?

.breadcrumb-item + .breadcrumb-item:before {
    font-family: "Font Awesome 5 Pro" !important;
    content: "\f061" !important;
    font-weight: 900;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on reducing the height and improving responsiveness in Bootstrap 4

I've been struggling to adjust the image height to take up 75% of the screen. I attempted using height: 75%; and class="h-75", but it doesn't seem to be effective. Currently, I have class="h-800" with h-800 { height: 800px; }, ...

htmlcssbootstrap-4

What is the best method for eliminating underscores from text that is hyperlinked in a locally hosted HTML file?

I recently encountered an issue with my HTML file where the text "Indian" became underlined after saving the file. Here is the code snippet: <a href="file:///G:\work files\project\indian.html" target="_blank"> <div class="button ...

htmlcss

Displaying and concealing a subcomponent within a parent element for a set duration of time

I have a notification component that is displayed as a child component in the parent component after a button click. It automatically hides after a certain number of seconds. Here is the code I have developed: MyCode Parent component: <button (click)= ...

javascripthtmlcssangulartypescript

Is there a way to customize the hover color of the Bootstrap 4 navbar toggler?

I'm working with Bootstrap 4 and I would like the color of my navbar toggle icon (commonly referred to as the burger menu) to change when it is hovered over. I have attempted the following code but it is not producing the desired result: .navbar-light ...

cssbootstrap-4

How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app. <section class='todoapp'> <header id='header'> & ...

javascriptcssember.js

Decrease the gap between the <hr> and <div> elements

I currently have multiple div tags with hr tags in between, resulting in automatic spacing. I am looking to decrease this space. Please view the image link provided below for reference. [I am aiming to minimize the gap indicated by the arrow] Additionally ...

htmlcsstextlinespace

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Using HTML: <input class="m-ctrl-medium date-picker" size="16" type="text" id='lateETD1' name="dateRecv" value=""/> Not working with script: var ETD = $("#ETD"); ETD.html("<input class='m-ctrl-medium date-picker' id='la ...

javascriptjqueryhtmlbootstrap-4

"Hovering over the navigation tab does not trigger the dropdown menu

Can't seem to get my dropdown menu on the right to work when hovered. I feel like I must be missing something really simple, but I can't figure it out! When I use .vanish:hover .dropdown, it's not quite hitting the mark. What am I doing wron ...

htmlcss

Centered Navigation Bar Aligned with Header

I'm having trouble aligning my header vertically with the text in my nav-bar using Bootstrap 4.6. The nav-bar items are right-aligned, so the text isn't centered in the middle of the page like shown in picture 3. .jumbotron { background: #3 ...

htmlcssbootstrap-4

Guide to dynamically add tr element using CSS to a table

While using the $.each function in jQuery, I am retrieving data and adding it to a table in the following manner: $.each(segment, function (index, innerSegment) { var tr; tr = $('<tr/>'); tr.append("<td>" + segment[i].Airline.Air ...

javascriptjqueryhtmlcss

Issue with Bootstrap 4 column width when using Angular 2 *ngFor

I have a container that displays search results. The layout is set up using Bootstrap columns, but there seems to be excessive padding or margin causing the results to appear very narrow. Interestingly, if I manually input each result instead of using *ngF ...

htmlcssangulartwitter-bootstrap-4bootstrap-4

The items in the Bootstrap dropdown are not displaying

I am currently working on a project using Angular 12, and I encountered an issue with my Bootstrap dropdown menu not displaying any items. Below is the HTML code snippet causing the problem: <nav class="navbar navbar-expand navbar-dark"> ...

htmlangularbootstrap-4angular-ui-bootstrap

What is the best way to implement word-wrap on ANTD Select's title and dropdown options in order to adjust the element's height?

I need my ANTD title/selected item to be on a separate row and adjust the height of the Select component. Here is the example I have been working on: https://codesandbox.io/s/basic-usage-antd-4-24-7-forked-8jzp29?file=/demo.js These are the specific styl ...

cssreactjsantdcss-modules

How come an image with position:absolute doesn't have a height? Even though I can clearly see its height in the browser

I'm perplexed as to why a div with display:block won't position itself below another div with the same style. Here's my code: .container{ display: block; position: relative; } .container img{ width: 100%; position: absolute; t ...

htmlcssposition

Increase jQuery value by X each time it is clicked

I'm trying to create a custom next/prev navigation where clicking the "next" button will animate the margin left by X on each click until reaching the end (-320px), with a similar method for the back button. Here is the JavaScript code I've been ...

jquerycss

The $_GET[id] function is malfunctioning within the designated div element

I'm trying to create a link with an id that points to a specific div on the same page. <a href="#?id=<?php echo $id; ?>" class="team-detail" data-reveal-id="single-news"></a> However, the id is not working in: <div id="single- ...

javascriptphpjqueryhtmlcss

What could be the reason for the minimum width exceeding the maximum width?

As I delve into the world of web design, I am facing a bit of a learning curve after such a long break from building sites from scratch. One thing that caught my attention in Dreamweaver is the pre-fabricated Bootstrap code within the .css files. I' ...

cssbootstrap-4media-queriesdreamweaver

Padding with Bootstrap 4 for smaller screens

Using Bootstrap 4 for my website, I have a navbar that includes signup and login buttons. To create some space between the buttons, I added padding which looks great on larger screens but on smaller screens, the padding seems to disappear as shown in the i ...

twitter-bootstrapbootstrap-4

The placement of text appears to be incorrect when applying the float:left property in CSS

My issue is that I want #text1 to display on the right side of #video1, and #text2 to be positioned next to #video2. However, currently #text2 is also appearing beside #video1. Can someone please explain why this is happening and provide a solution to fi ...

css

Tips on how to update the styling of an active link

http://jsfiddle.net/G8djC/2/ Looking to create a tabbed area where content changes based on the tab clicked. The Javascript function switches the link class to active upon clicking. However, struggling to change the color of the active tab beyond the firs ...

javascripthtmlcssclasstabs