Jump to content


Photo
- - - - -

Font Awesome Icons showing empty boxes

font awesome

Best Answer Danny , 13 April 2014 - 11:54 AM

The issue is how you have set up your site, the URLs for your scripts/stylesheets are all like this:

 
href='/websitecms/wp-content/uploads/pagelines/compiled-css-core-1397373659.css'

Where as on my test site with WordPress installed in a subdirectory like you have they look like this:

 
href='http://wpdir.dev/test/wp-content/uploads/pagelines/compiled-css-core-1397389995.css'

 

See how mine contains http://, where as yours doesn't. So how have you have added your site url as Simon suggested above? The issue is most definitely caused by how you have setup your site.

Go to the full post


  • Please log in to reply
32 replies to this topic

#21 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 03 June 2014 - 07:25 PM

you can use icon in replace of fa if you want.

 

Apologies again to the original post author for unrelated replies.



#22 josh1178

josh1178

    Super Member

  • Members

  • 181 posts
  • Framework Version:2.3

Posted 10 June 2014 - 10:05 PM

I just spent 40 minutes troubleshooting this trying to use the solution Danny posted, when in the end it was simply that the wrong icons are listed in the Pagelines documentation.  Thanks to Batman for pointing this out earlier. The solution by Danny should be updated and the online DMS documentation should be updated as well. Thanks

 

The working icon names are here:

http://fortawesome.g...-Awesome/icons/

 

The wrong non-working icon names are here:

http://docs.pageline...ls/font-awesome



#23 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 10 June 2014 - 10:14 PM

Which one isnt working?

 

(Apologies again to the original post author for unrelated replies.)



#24 josh1178

josh1178

    Super Member

  • Members

  • 181 posts
  • Framework Version:2.3

Posted 10 June 2014 - 10:19 PM

Sorry. I was experiencing the 'white box' problem the original post was discussing.  So, I tried to solve it by figuring out what Danny meant about URLs. Then I realized that the reason I was getting the white boxes is because the documentation uses what is apparently old font-awesome icon names. The ones listed on the documentation page result in a white box, the ones on the font awesome page seem to work. 

 

Thanks



#25 Danny

Danny

    Is Awesome!

  • Moderators
  • 16561 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 June 2014 - 10:36 AM

Which ones are you referring to ?



#26 josh1178

josh1178

    Super Member

  • Members

  • 181 posts
  • Framework Version:2.3

Posted 11 June 2014 - 10:00 PM

I didn't try all of them, but for me

 

The working icon names are here:

http://fortawesome.g...-Awesome/icons/

 

The wrong non-working icon names are here:

http://docs.pageline...ls/font-awesome



#27 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 11 June 2014 - 10:47 PM

You must have tried at least one of them though surely



#28 josh1178

josh1178

    Super Member

  • Members

  • 181 posts
  • Framework Version:2.3

Posted 11 June 2014 - 11:43 PM

Definitely, I tried a couple.

 

All fired blanks. For example, it seems that typing icon- is wrong and it wants to see fa fa-

 

First I tried the one in your online doc example.

<i class="icon-coffee"></i>

 

Then I tried the cart one:

<i class="icon-shopping-cart"></i>

 

The user one:

<i class="icon-user"></i>

 

All of them result in a small square icon, whereas using the ones from the font awesome site work fine.



#29 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 11 June 2014 - 11:49 PM

<i class="icon icon-coffee"></i>

 

The docs are just missing the extra class thats all.

 

icon icon-coffee is the same as fa fa-coffee 



#30 josh1178

josh1178

    Super Member

  • Members

  • 181 posts
  • Framework Version:2.3

Posted 11 June 2014 - 11:55 PM

I just tested and that is indeed working. Can you pass the word on to the powers that be to correct that or should I submit a github ticket? 

Thanks!



#31 Danny

Danny

    Is Awesome!

  • Moderators
  • 16561 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 June 2014 - 12:47 PM

I've made a note to update the docs, thanks for bring this our my attention.



#32 andylemay

andylemay

    Advanced Member

  • Members

  • 69 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 03 July 2014 - 05:23 AM

Hi Batman,

 

Yup that was it!  The font-awesome icon names all changed! with my upgrade to DMS2!  Fixed, thank you!

 

Andy

 

Hi Andy

 

Please, you can take a look to this

http://fortawesome.g...-Awesome/icons/

The DMS 2 use Version 4.1

 

The smile now is (for example)

<i class="fa fa-smile-o"></i> fa-smile-o

http://fortawesome.g...e/icon/smile-o/

 



#33 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 03 July 2014 - 11:28 AM

Thank You for letting us know. 







Also tagged with one or more of these keywords: font awesome