Font Icon Not Rendering, Check text-transform

Written on August 13, 2014

At NC State, we use a font-icon set where letters are assigned to the content property in the :after psuedo selector. In one instance when I was trying to call a font-icon in an HTML element, I noticed the icon wasn’t rendering.

Looking at the console, my team and I discovered an issue with font-icon files being served from other subdomains. We were able to mitigate this by changing the CORS settings on our server.

After fixing the server issue, I still noticed that the font-icon wasn’t rendering.

One of the other devs pointed out that the content property of the icon I was trying to use was applied to a lowercase letter. Checking all the styles on the element, we noticed that it had a text-transform of uppercase. Which to my surprise also made the content for the pseudo selector, uppercase.

Applying a text-transform: lowercase to that element seemed to fix the problem.

Stay in touch

Thanks for reading this article. I'd love to stay in touch and share articles like this one in your inbox. Sign up for my newsletter.