Icon Strategy

dabblet.css

/**
 * Icon Strategy
 */
 
 @font-face {
   font-family: icons;
   src: url('//erikdavidjung.com/icons.svg') format('svg');
 }

.icon {
  display: inline-block;
  font-size: 18px;
  font-family: sans-serif;
  font-weight: bold;
  line-height: 18px;
  padding: 6px;
  text-transform: uppercase;
}

.icon::before,
.icon::after {
  font-family: icons;
  vertical-align: top;
}

.icon-text {
  color: #444;
}

.icon-button {
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.icon-text::before {
  content: attr(data-icon);
  margin-right: 6px;
}

.icon-button::after {
  content: attr(data-icon);
  margin-left: 6px;
}

.icon-only::before {
  content: attr(data-icon);
}

dabblet.html

<a class="icon icon-text" data-icon="A">Text with icon</a>
<a class="icon icon-text" data-icon="B">Text with icon</a>
<a class="icon icon-text" data-icon="C">Text with icon</a>
<a class="icon icon-text" data-icon="D">Text with icon</a>
<hr>
<button class="icon icon-button" data-icon="A">Go</button>
<button class="icon icon-button" data-icon="B">Go</button>
<button class="icon icon-button" data-icon="C">Go</button>
<button class="icon icon-button" data-icon="D">Go</button>
<hr>

<button class="icon icon-only" data-icon="A"></button>
<button class="icon icon-only" data-icon="B"></button>
<button class="icon icon-only" data-icon="C"></button>
<button class="icon icon-only" data-icon="D"></button>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}