Using Html Entities rather than Icons

    This article is my opinion on the subject of html entities vs. png or icon files in a web application. If you have been watching bootstrap and seen the beta version of bootstrap 4 you might have seen some of the examples using entities. Initial I thought this was an improvement and in a lot of ways still do. But now I have given it some thought about the longer term of solution. I still think font-awesome is a much better choice to go because of the ability to modify the styles or simply create custom ones in a svg.  I know entities are nothing new but just wanted to write out why I would use them in some cases and not others.

Use case for Entities
    For one of my sites I actually used the up and down triangle entity. I think it’s a good fit for one the ui-grid and other javascript libraries that require some kind of indicator of sorting. In this situation it’s really a grey area of whether the icon should be an icon or entity because in this use I'm not going to style it all that much. As performance choice it’s also clear the entity is a better selection so I guess this is where I split on the decision whether to use entities or icons. So to sum up my thoughts in a javascript library I could see it being necessary to limit of css.

 ▲ ▲, ▼ ▼ or fa-sort-desc fa-sort-asc 
Use for icons
   Like I've stated I'm using font-awesome and in my opinion I think there are more scenarios that icons solve over entities. Now if only font-awesome was easier to modify in inkscape or a free tool then we're talking. You could do what you want with the icon files just as would with the sass files in font-awesome. Maybe font-awesome just needs a grunt/gulp package that looks at the sass files and adds/removes the svg related to css selector. Not that the icon files takes up a lot of space but it would make customizing it that much easier.

Popular posts from this blog

UI-Bootstrap Collapsible Sticky Footer

Editing Blogger Post on Github, Rough Draft

HTML5 Audio doesn't Autoplay for Chrome on Android