Font Icon Not Rendering, Check text-transform

Written by Michael Lee 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.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design, side projects and working remotely. Sign up and I'll send you my articles straight to your email.

:wave: Hey hey, I'm Michael Lee! I really appreciate you taking the time to read this article.

Be sure to check out my other articles.