Font-Awesome Icons Not Rendering via the Boostrapcdn

Font Awesome icons are not working, I have included all required files

Under your reference, you have this:

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

Specifically, the href= part.

However, under your full html is this:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Have you tried replacing src= with href= in your full html to become this?

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

Works for me: http://codepen.io/TheNathanG/pen/xbyFg

Font-Awesome icons not rendering via the BoostrapCDN

The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".

Solution:

Change the path of the css or mimic it on your local machine.
Run a local or remote http server and access the page.

For more info:
URI starting with two slashes ... how do they behave?

Font Awesome not working, icons showing as squares

According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.

FontAwesome icons are not showing, Why? (Font-awesome/4.2.0)

I managed to reproduce your problem by running the code you gave directly, locally in my browser.

The SO snippet system does add things (like doctype, body element if it's not there already etc) to the code so something was being done that allowed the FA icons to load in the snippet system but not in the raw code locally. (I don't know what, hopefully someone will explain).

Anyway, locally you can see the file not loading if you go into dev tools inspect facility.

When I added https: to the front of the url it did load and the icons showed up fine. So use this:

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

FontAwesome icons are appearing as squares, how to fix?

Use FontAwesome's CDN rather than Bootstrap's. I've actually had this exact issue previously with CDNs hosted by BootstrapCDN.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

Font Awesome icon not showing, but other do

The fill after the icon name is a bootstrap thing but you need to change the fa or fas to bi

see the available icons for bootstrap and font-awesome

here is how you can use both font awesome and bootstrap icons:

<!--  Font Awesome cdn -->
<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<!--  Bootstrap cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

 
<h5>font awesome Icon :</h5>
<i class="fa fa-person"></i>

<h5>Bootstrap Icon :</h5>
<i class="bi bi-person-fill"></i>

Font awesome icons not working with bootstrap

Add http: to the href so it looks like this:

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

EDIT: If your page uses HTTPS, link to the font-awesome CSS using HTTPS (replace http:// with https:// in the link above).

Font Awesome 5, why is CSS content not showing?

^{If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version}

First, you only need to include the CSS file of Font Awesome 5 either in the head tag using:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Or within the CSS file:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")

Then you need to correct the font-family and the content like below:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {    color:#000;    content: '\f35a'; /* You should use \ and not /*/    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/    font-style: normal;    font-weight: normal;    font-size:40px;}

<i class="fp-prev"></i>

Font Awesome: Icons don't appear

Fixed it by using "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" instead of the path to the font-awesome css placed in my computer.