2

I am developing an website for my project. I am using Bootstrap and Font Awesome for glyphicons, but I am facing an issue. When I use Font Awesome icons some icons do not show up in the browser, but some icons do show up. E.g. "fa fa-user" does not show up. It comes up like a small box. But some icons show and I linked the font-awesome-min.css in the webpage.

Refer the below image:

check out the signup fa icon

Biffen
  • 5,354
  • 5
  • 27
  • 32
pratheek
  • 41
  • 5
  • Right click -> inspect element -> go to "::before" -> see "content" rule then say me what there is written. – paolobasso Apr 23 '16 at 16:37

1 Answers1

1

The problem I experienced most often is that the *.woff2 file was blocked by the server. I suspect this is also the case here. See if you can open the <font-awesome>/fonts/fontawesome-webfont.woff2 file in the browser. If not you need to change the configuration of the web server.

Edit: I found a related post, see here: Proper MIME type for .woff2 fonts, the 2nd answer shows how to configure IIS for example.

Community
  • 1
  • 1
maraca
  • 7,323
  • 3
  • 20
  • 41
  • I am sorry to tel this but seriously i did nt understand the *.woff2 thing. can u please elaborate ?? – pratheek Apr 23 '16 at 15:11
  • Did you complete the first step? You included the css, right? So use this URL, but instead of `.../css/font-awesome.min.css` you write `.../fonts/fontawesome-webfont.woff2`, could you open/download this file in the browser or do you get an error (just paste the URL in the address bar and hit enter)? If you get an error, then this is the correct answer, otherwise the problem is somewhere else. – maraca Apr 23 '16 at 15:21
  • It's some setting in the server configuration like extensions > woff2 > "serve as file"... or you need to edit some config file... depends on your environment. – maraca Apr 23 '16 at 15:28
  • i was able to open/download that file wen i pasted in the URL . – pratheek Apr 23 '16 at 15:40