Missing Font-Awesome symbol on display

While I have successfully implemented Bootstrap4 in my project and all its classes are working fine, I am facing an issue with Font-Awesome. This is my first time using Font-Awesome and I can't seem to get the icons to display on the page. I included Font-Awesome by adding this line in the head section of my HTML file.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

Later in my code, I added the following snippet.

<div class="container text-center">
    <br /><br /><br />
    <i class="icon-search"></i> <input id="search" type="text" placeholder="Search for a City" />
</div>

I referred to this documentation for usage: My network tab confirms that Font-Awesome was fetched successfully with a status 200.

cssfont-awesomebootstrap-4

Answer №1

When utilizing the CDN for version 3.2.1, everything functions smoothly.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<div class="container text-center">
    <br /><br /><br />
    <i class="icon-search"></i> <input id="search" type="text" placeholder="Search for a City" />
</div>

If you prefer to use version 4.7.0, the setup is as follows:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <div class="container text-center">
        <br /><br /><br />
        <i class="fa fa-search"></i> <input id="search" type="text" placeholder="Search for a City" />
    </div>

Reference guide from version v4:

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

Is it possible to create a CSS grid with a varying number of columns?

I recently set up a webpage with a CSS grid that centers the main section at 80% width. <html> .... <body> <main> <section> </section> </main> </body> .... </html> main { display: grid; j ...

htmlcssgridcss-grid

Revised: "Redesigned CSS class names taken from a

I created a React component library using mantine with @rollup package. This library comprises custom components styled with styled-components and CSS module (.module.css) files. All the css modules are bundled in javascript and injected into the body htm ...

cssreactjsnext.jsrollup

What is the best way to find out the size of a Google font file?

Google fonts are being utilized in my project, specifically the Roboto font for light and regular font styles. Unfortunately, I am unsure of the file size of this particular font. ...

htmlcssgoogle-font-api

When using React JSX, the style attribute does not recognize the object-fit property for images

When working with bootstrap cards, I encountered the need to make all images within the cards the same size. While there are various ways to achieve this, I used the following styling approach: Take a look at the image style below <div className=" ...

cssreactjstwitter-bootstrapjsxbootstrap-5

Concealing a hyperlink within a DIV by removing or hiding it

I am looking to temporarily hide or remove a specific link (team.aspx) within a drop-down menu, with the intention of adding it back in later. Here is my current code: <div id="nav_menu"> <ul id="nav"> <li class="current"><a href= ...

jqueryhtmlcss

Using mx-auto in Bootstrap's col class to center the img tag isn't working as expected

I am attempting to create a row with two columns; one is col-7 and the other is col-5. In col-, I am adding a form where I encountered an issue with col-7 as I tried to insert a png using an image tag. My goal is to center the image both vertically and hor ...

javascripthtmlcssbootstrap-4

Eliminate any space between the text and the border by removing all margin and padding

<div><span style="border-color: black; border-width: thin; border-style: solid;"> Com </span><span style="border-color: black; border-width: thin; border-style: solid;"> pu </span><span style="border-color: black; border-wi ...

htmlcss

The functionality of display flex is not functioning as expected outside of the CodePen

I attempted to create a responsive two-column layout on Codepen with success. The layout is quite simple, featuring a YouTube video and some text. However, when I tried to transfer this to my website, it failed to work... Here is the code – hoping someo ...

htmlcssflexboxmedia-queries

I must negate the impact of the parent CSS file without directly countering it

Currently, I am developing web pages with "rtl" directionality. Within my shop.html template, I am utilizing a bootstrap component known as "breadcrumbs". As a result, I need the breadcrumbs to display from right to left. <div class="breadcrumb"> ...

htmlcssbootstrap-4css-float

Customizing the css for a certain category

On my homepage, I display categories with unique labels and icons. Each category is assigned a specific color for its label/icon. Typically, setting unique colors in HTML is straightforward: <!-- ngRepeat: category in categories | orderBy:'displ ...

htmlcsscategories

How come the h2::after element is positioned directly beneath the main h2 element, and with a margin-bottom?

I'm puzzled as to why the margin-bottom property in the main h2 element isn't affecting its "::after" element. Both are defined as block elements, so one margin should provide enough space between them. Even though the "h2::after" element has 0 m ...

htmlcss

Creating dynamic height based on width using JavaScript

I'm trying to make a rectangle responsive based on the width of the window. This is my current logic: aspectRatio = 16 / 9 win = { width: window.innerWidth, height: window.innerHeight, } get browser() { const width = this.win.width - 250 ...

javascripthtmlcsscanvaskonvajs

The text in IE11 css live editor is cutting off the css text in an improper way

After inputting "break-all;" in the CSS editor, I noticed that it resulted in this: I attempted to paste into the editor as well, but encountered the same outcome. Any suggestions? Update Apologies, the browser version is actually IE11 vesion:11.0.9600. ...

cssinternet-explorer-11

The icon is being displayed as text instead of the actual Fontawesome icon

Using jquery version 3.3.1 I am dynamically creating an anchor tag: let link = $("<a>"); link.attr("href", "#"); link.text("My anchor" + ' <i class="fas fa-people-carry"></i>'); However, when I try to display ...

javascriptjqueryfont-awesome

Is it frowned upon to modify Jquery Validation for the purpose of achieving a customized style?

When it comes to adding an icon after an input field when a required field is not filled up, my friend and I have different approaches. My idea is to modify the highlight function in Jquery.Validation by adding a class to the parent element of the input ( ...

jqueryhtmlcss

Why isn't my CSS transition animation working? Any suggestions on how to troubleshoot and resolve

I am looking to incorporate a transition animation when the image changes, but it seems that the transition is not working as intended. Can anyone provide guidance on how to make the transition style work correctly in this scenario? (Ideally, I would like ...

javascripthtmlcsssass

Tips for showcasing the dynamic legend in a line graph

Within my project, the legend is being displayed dynamically. However, I am looking to showcase names such as "student-marks" and "studentannualscore" instead of numerical values like 0, 1, 2, etc. Currently, the values are appearing as numbers (e.g., 0 ...

javascripthtmlcsskendo-ui

Are there any Bootstrap 4 classes that have the "cursor:pointer" style other than "btn"?

I am currently utilizing the Bootstrap cards class for my project and I am trying to achieve a cursor pointer effect when hovering over certain cards. However, I prefer not to resort to using the style attribute and only want to utilize Bootstrap classes ...

cssbootstrap-4

Impact of shaking the browser window using JavaScript

Is there a way to create a browser screen shaking effect using javascript? I attempted to use window.moveBy(x,y) after researching online, but it didn't work as expected. Are there any libraries or code snippets available that can assist in achievin ...

javascripthtmlcssjquery-effects

Merge two methods to create proportional buttons that function flawlessly on Mac Firefox

code I am facing an issue with the buttons in my code. While they work fine on Mac Firefox, they are not proportional. I made modifications to make them proportional as desired, but now they are not working on Mac Firefox. Since I have multiple pages wit ...

cssbootstrap-4