Home → General →

Font Icons Not Showing Up Correctly

• Edit

Ann

23 Jun, 2015 08:31 PM

Hi,

I hope this isn't confusing. I can't get my icons to appear on my browser after I publish it. In the View tab of the CMS, it appears correctly as it should but when I publish it and then view it on my browser, I see a square with the unicode inside it where the icon should be.

I am using Font Awesome icons. In my css code, I have something like this:
 .email::before{
   font-family: FontAwesome;
   content: "\f0e0";
}

I use a Content Type that let's me choose a Block. I have to do this, because I am adding multiple blocks to that section. The Block that I created uses a data definition that allows me to enter text for name, email, etc. Then I created a Transform block that takes that information and wraps it inside a <span> tag like this:

<span class="email"><a href="mailto:{system-data-structure/email}"><xsl:value-of select="system-data-structure/email"/></a></span>

Again, when I view the page inside the CMS, it displays the "email" icon correctly. The problem I have only occurs when it's published and views in a browser, I see a square with the unicode inside it instead of the icon. I've changed the <span> tags to <div> tags and it still doesn't resolve the problem.

Does anyone know what is happening or have suggestions to fix this?

1. 1 Posted by Ryan Griffith on 24 Jun, 2015 12:39 PM

   

   Hi Ann,

   Based on your description of the problem, it sounds as though the FontAwesome CSS and/or icon files are not published to your live website. This would explain why you can see the icon within Cascade, but not after publishing.

   Perhaps a good way to test this would be to open up your browser's developer console and refresh the page. If the browser is not able to load the resources at the given paths, you should see some error messages stating it was unable to load the file(s).

   When you have a moment, confirm if you:

   • Have published the required FontAwesome CSS and icon files
   • Are including the CSS file on you page and the path is correct
   • Have the correct path in your CSS file to the icon files

   Please let me know if you have any questions.

   Thanks!

   • Edit

2. 2 Posted by Ann Hoang on 24 Jun, 2015 01:07 PM

   

   Hi, Yes. That was my problem. I only published it to the test server, not to the production server. Thank you!  Ann Hoang  
         From: Ryan Griffith <[email blocked]>
    To: [email blocked]
    Sent: Wednesday, June 24, 2015 7:39 AM
    Subject: Re: Font Icons Not Showing Up Correctly [General #21818]
      
    #yiv6915605344 pre {width:92%;margin:10px 2%;padding:5px 2%;background:#efefef;border:1px solid #d6d6d6;}#yiv6915605344 blockquote {margin-left:0;padding-left:1em;border-left:5px solid #ccc;}

   • Edit

3. 3 Posted by Ryan Griffith on 24 Jun, 2015 03:14 PM

   

   Thank you for following up, Ann, I am glad to hear you were able to resolve the issue.

   I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

   Have a great day!

   • Edit

4. Ryan Griffith closed this discussion on 24 Jun, 2015 03:14 PM.