HTML and CSS tips #12 "Icon fonts isn't the best method to markup graphical icons"

twitter logo github logo Updated on ・1 min read

I think icon fonts isn't the best method to markup graphical icons. The main disadvantage in my opinion, is that while icon font isn't loaded the user can't see icons. So you should to markup graphical icons using SVG to solve this problem.

Don't do it

<div class="icon">
  <i class="ti-crown"></i>
</div>
[class^="ti-"], [class*=" ti-"] {
  font-family: 'themify';
}

.icon {
  font-size: 25px;
  color: #868ca0;
} 

You can use it instead

<svg class="icon" viewBox="0 0 56.7 56.7">
  <path d="..."/>
</svg>
.icon {
  width: 25px;
  height: 25px;
  fill: #868ca0;
} 

P.S: I share my experience with my Linkedin subscribers. Are you interested? Join to us! πŸ‘‰ https://www.linkedin.com/in/melnik909/

twitter logo DISCUSS (1)
markdown guide
 

I've always thinked that adding more markup to html page only for decoration purposes wasn't the good solution.

Classic DEV Post from Jan 17

25 years of coding, and I'm just beginning

I've come to a conclusion that I have nothing to show for my 25 years of coding. I am ready to begin and I have a plan.

Stas Melnikov profile image
User Interface Designer, HTML&CSS mentor, Patreon blogger. I share my experience with people