There is a simple, but genius, method to replace button with icon. I learned it from jQuery. First, create the button, as you would always do. You can use <button>...
CSS in separate file from HTML
There are few exceptions to this rule. For example, you are writing a blog article. You want a specific text to be of a specific color. That color would be defined as inline CSS.
Divide Page into Independent Elements
Take your webpage and divide it into independent elements. Each element should have separate class name and CSS definition. Each element should be simple, but it can be composed of sub-element. However, sub-element should be independent of the parent. Also, have a convention for naming your independent elements. I like to use “-block” suffix.
Consider the following example:
<div class="aside-area-block"> <div class="aside-area-block-content"> <div class="news-banner-block">...</div> <div class="recommendations-banner-block">...</div> </div> <div class="aside-area-block-footer">...</div> </div>
Here, you have three independent elements:
Each one should be styled as if there was no relationship between them.
Define Common Style Separately
Have a separate set of classes for definitive common style between elements. One convention is to have “is-” prefix for boolean properties. For example:
Let’s say you have two elements of the same type, “news-banner-block”. You want to have two versions of it: wide and narrow. Then use “-version” suffix to create two variants of the same element, ex: class=”news-banner-block narrow-version”
Finally, buttons and titles are recurring elements on most websites. They repeat over and over in different areas, and they often follow the same style. If you design has 2 styles of buttons and 3 styles of titles, have that in CSS two. Create appropriate class with “-button” and “-title” suffixes.