CODEWITHSUNDEEP
htmlcssdjangoamazon-s3
Tom H
Tom H

Reputation: 175

Font-Awesome CSS file not working but Font-Awesome CDN works. Why?

I am building my own website and am hosting my static files in an AWS S3 bucket. Everything on my site seems to work except for the CSS file that contains all of the font-awesome CSS information. In this case, my social media icons and all of the other icons that font-awesome has to offer wouldn't work even though I triple checked that the path was correct (Checked in aws as well as through inspection on chrome. The paths matched) I recently added the font-awesome CDN and now they all appear. While I am happy that I resolved the issue, I would really like to know why the CSS didn't work. I downloaded the CSS file from bootstrapmade so everything should work just like they created it.

Could anyone tell me why this might be the case? I have run into this a few times and am wondering if there is something that I am missing.

I am currently using Django 2.3 with Python 3.7.3. 

 <!-- Libraries CSS Files -->
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
  <link href="{% static 'static/lib/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
  <link href="{% static 'static/lib/owlcarousel/owl.carousel.min.css' %}" rel="stylesheet">
  <link href="{% static 'static/lib/owlcarousel/owl.theme.min.css' %}" rel="stylesheet">
  <link href="{% static 'static/lib/owlcarousel/owl.transitions.min.css' %}" rel="stylesheet">

Upvotes: 1

Views: 912

Answers (1)

shafikshaon
shafikshaon

Reputation: 6404

For font awesome version below 4.7 The folder structure should maintain

├── css
│   ├── font-awesome.css
│   └── font-awesome.min.css
├── fonts
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2

the fonts directory files available when you download font awesome zip file from here

Upvotes: 1

Related Questions