Issue with Font Awesome 5 icons not displaying properly after integrating Bootstrap

Trying to spruce up my buttons by adding some fontawesome icons from bootstrap.

The icons I'm using are:

  • fas fa-user
  • fas fa-users

They display fine without any styling. However, when I apply the bootstrap button css, the "fa-users" icon appears as a square instead of an actual icon. Not quite sure what's causing this issue or how to resolve it. Any suggestions would be greatly appreciated. Thank you.

<div>
    <em class="fas fa-user"></em>
    <em class="fas fa-user btn btn-sm btn-purple"></em>
</div>

<div>
    <em class="fas fa-users"></em>
    <em class="fas fa-users btn btn-sm btn-purple"></em>
</div>

https://i.sstatic.net/dtvzW.gif

Answer №1

btn adds a font-weight that may need to be changed back to the default one specified within fas

.fas.btn {
  font-weight:900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
<div>
    <em class="fas fa-user"></em>
    <em class="fas fa-user btn btn-sm btn-success"></em>
</div>

<div>
    <em class="fas fa-users"></em>
    <em class="fas fa-users btn btn-sm btn-success"></em>
</div>

Related: Font Awesome 5 on pseudo elements shows square instead of icon

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

Ways to display one element while concealing it when another is clicked

I am utilizing a series of div elements that can be triggered with the following code snippet: $(".course_id").on("click", function(){ var id = $(this).data("id"); $("div#lessons_by_course_" + id).removeClass("hidden"); }); The ...

Colored stripe on a horizontal menu

I am attempting to design a page header with a menu that resembles the image provided below. As I construct the navigation, each link area (highlighted in blue) is represented by an <li>. However, I am encountering an issue where the items are stack ...

Bootstrap datepicker embedded within a modal will scroll along with the parent page, rather than the modal itself

I recently encountered an issue with a bootstrap template where I needed to incorporate a datepicker within a modal. The modal contains scrollable content, but when I clicked on the datepicker field and scrolled the page, the datepicker moved with the pa ...

Adjust the appearance attribute of FormField within the designated theme

Currently, I am collaborating within an NX Monorepo and utilizing a shared ui-components library that extends the capabilities of Angular Material Components. Despite using different themes for various applications, I am aiming to incorporate appearance=&a ...

issues with the visual studio website code (Struggling to establish a connection between the site and a database)

Currently, I am in the process of developing a website using Visual Studio and attempting to connect it to a Microsoft SQL Server 2014 database. My learning journey has led me to a tutorial video on YouTube focusing on creating a coffee-themed website alon ...

When utilizing React, I generated an HTML page with a distinct .js file, however, encountered two unexpected errors

Update : Gratitude to everyone who has helped me in tackling this issue. One user suggested using a web server, but my intention was to find a solution using just a single HTML and JS file. Even though I tried following the steps from a similar question o ...

Position a flash element adjacent to an input field

I'm struggling to properly align two elements together. Below is the HTML code: <input class='pretty-border' id='shareinput' value='afdsdasfdasfadsff' /> <span> <object classid="clsid:d27cdb6e-ae6-11c ...

Is there a method to identify if the dark theme is enabled in iBooks while working within an EPUB file?

Is there a specific code or feature that iBooks uses to enable the customization of certain sections within the book, such as changing to lighter colors when night mode is on? ...

Whenever the page is refreshed, the vertical menu bar with an accordion feature hides the sub

I have designed a vertical accordion menu bar following the example at http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol However, I am encountering an issue where clicking on a button to display a submenu causes the page to refr ...

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heav ...

Is there a way to disable the calendar linking feature in the iPhone Mail Client

I am currently working on an application where I generate emails with time stamps. However, when viewing these emails in the iPhone mail client, the timestamp gets turned into a link with an ugly blue color and underline. Is there a way to prevent this fro ...

Using Ionic framework alongside Ionic View to display a beautiful background image

How can I display a full background image in Ionic 1.2? -hooks -platfroms -plugins -resources -scss -www -css -img -js -lib -templates ... Currently, I have the following HTML structure: <ion-view id="login" hide-nav-bar="true"> ...

Function for editing a button in an AngularJS single page application

I am a beginner in AngularJS and I'm currently working on a project to create a single page application for tracking expenses. However, I'm facing some challenges with my code. Although I have successfully implemented most of the functions, I am ...

Guidelines for transmitting form information to a web API using Angular

I am currently working on an Angular 6 project where I have a form and a table that retrieves data from a web API. I want to know if it's possible to send the form data to that web API. Here is the code snippet that I have so far: HTML Form: &l ...

Carousel issue with sliding on Bootstrap when deployed on various web servers

I am experiencing a strange issue with my website. I have it installed on two different servers, and while the Carousel works perfectly fine on the first server, it does not slide properly on the second server. Here are the links to each version of the we ...

Empty gap separating two side by side photos

Could someone assist me with removing the excessive white space between these two images? Each image is contained within its own respective div, with layer effects applied when hovered over. I've attempted changing the display to inline-block and sett ...

Python Selenium - The Select method can only be used with <select> tags, not <div> tags

Seeking guidance on selecting an element from a dropdown box on a work website using web scraping and selenium. As a newcomer to this technology, I am struggling and looking for some assistance in the right direction. Unlike other scenarios I have come acr ...

Personalized Bootstrap 4.1 Toggle Animation

I have been attempting to implement a customized menu toggle on Bootstrap 4.0's Navbar menu, using the code provided by Codeply HERE. My goal is to apply the X toggle style to my website's bootstrap navbar. Below is the current setup I have imple ...

Showing the number of times a button has been pressed

I have written some HTML code to create a button and now I am looking for guidance on how I can use Vue.js to track how many times the button has been clicked. Here is what I have so far: <div class="123"> <button id = "Abutton&q ...

Dynamic Select Option housing Bootstrap Popover

I am attempting to create a popover that generates dynamic content and reacts when an option is selected. On my page, I have a select element and one of the options should trigger a popover containing a form with 'Accept' and 'Cancel' ...