FontAwesome icons are appearing as squares, how to fix? - html

I'm trying to use their CDN via the BootstrapCDN but that didn't work so I tried to register and get my own CDN but that doesn't work either, they both produce these squares instead of the icon.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/MY-PERSONAL-ONE.css">
Here is what the icons look like
Edit: I ended up using the public one their website after I clicked 'Want to use Font Awesome without Font Awesome CDN?' and it worked..
Heres where that linked to: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

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">

Related

Bootstrap is overriding

I have this problem with a website I'm building. I'm trying to implement php code to connect to some external search engine but I found myself having some problems I can't fix. I realised somehow my bootstrap is overriding with the one from the server I want to implement it so it doesn't allow my web to find my style.css. I don't know if I'm making any sense. If anyone could have a look would be super great.
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/bootstrap.min.css?8656">
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/style.css?6959">
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/animate.min.css?2803">
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/ionicons.min.css">
Here are some pictures of my issue:
If I remove <link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/bootstrap.min.css?8656"> all the external widgets will work but then I will face some serious problems on my menu bar. I don't know what else to do, I have tried quite a few things! Someone told me I need to edit the Css class but I don't know how to do it!
Also chrome is telling me it can find the assets/css/style.css.map
This is because you have 2 version of Bootstrap in your page. Bootstrap 4 and bootstrap 3.x
The first highlighted CSS has Bootstrap version 4. Second highlight has Bootstrap 3x inside it along with other styles.
This looks like a conflict between both versions and your styles.

Font Awesome not working with HTML5 UP template

I'm trying to create a website using a template from HTML5 UP (Arcana). The structure of the template looks like this:
/assets
/assets/css
/assets/fonts
/assets/js
/assets/sass
/index.html
When not modifying anything, the template works as intended and all icons from Font Awesome are shown correctly (like here).
Now I want to structure my sites like this:
/assets
/assets/css
/assets/fonts
/assets/js
/assets/sass
/foo/page.html
/bar/page.html
/index.html
Now when I open /foo/page.html the style and Font Awesome icons are missing because the references to them are messed up.
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js"></script>
I tried to fix it like this:
<link rel="stylesheet" href="../assets/css/main.css" />
<script src="../assets/js/main.js"></script>
Now the style works again, but the Font Awesome icons are still shown as boxes.
I also tried including Font Awesome like this:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
However, the icons still don't work.
Changing
to
doesn't work either.
Update: For some reason this doesn't work in Firefox, but it works in MS Edge without a problem.
old
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
new
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

Bootstrap CSS not working on Github Pages, but works in localhost

I'm working on a portfolio and it looks great in localhost, but when I try to commit it to Github (https://gabrielbrickle.github.io/) the CSS does't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/nivo-lightbox.css" rel="stylesheet" />
<link href="css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css" />
<link href="css/animations.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">
<link href="color/default.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
try changing this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
to this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
If you open the developer console(right click inspect element), It says youre trying to load from http in a https
Use https:// for bootstrap css Link.If you right click , Inspect and look at the Console in Chrome you'd find the errors.
Github is loaded over HTTPS. Referencing external stylesheets will require the same protocol.
You can see the errors in DevTools.
You can either save Bootstrap locally and reference it, or load it with HyperText Transfer Protocol Secure (HTTPS).
I had a similar issue. I messed around and figured out that I had referred to one of the sources incorrectly. I used the wrong case for the first letter of a folder of a source. I had used ./Assets/css (incorrect one) instead of ./assets/css (correct one). Fixing the error fixed the CSS on the Github site as well!

Font Awesome icons 4.2.0 Minimal do not display

I'm trying to put a font awesome icons for my star rating.
I copy this below:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
And put it in a page(font-awesome-4.2.0.min.css) this below:
<link rel="stylesheet" href="css/font-awesome-4.2.0.min.css">
This work well
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
But this do not work
<link rel="stylesheet" href="css/font-awesome-4.2.0.min.css">
How can I make this (In a webpage: font-awesome-4.2.0.min.css) to work so that my icons can display
You should keep the folder structure of font awesome and point to the css there. Moving around the files can cause issues because they could be using relative paths to link to their other source files. It should look something like this:
<link rel="stylesheet" type="text/css" href="./font-awesome/css/font-awesome.min.css">
I use font awesome in almost every project and have had very little issues. You can see their instructions here: https://fortawesome.github.io/Font-Awesome/get-started/

Twitter Bootstrap css not working in print

This is aduplicate question, but as I am unable to get solution from the previous threads, so I am asking it again.
Styling how it looks in browser:
How it looks in print preview
Why bootstrap css not working in print.
I've tried following so far:
<link href="../bootstrap.min.css" rel="stylesheet"/>
AND
<link href="../bootstrap.min.css" rel="stylesheet" media="all"/>
AND
<link href="../bootstrap.min.css" rel="stylesheet" media="print"/>
Do I need to write a seperate print.css which will incorporate all the bootstrap styling used in the page, like col-lg-6, bg-danger.. and so on.
Check this fiddle