Icon buttons

SVG data tokens and display utilities for commonly used icon buttons.

Source file
src/css/icon-buttons.css
View on GitHub
https://github.com/pmbrown/ming-css/blob/main/src/css/icon-buttons.css

Included with:

Examples (anchor)

Icon sizes, color, opacity, vertical alignment and inline margins can be customized using variables.

Menu

Token
--ico-menu
Utility
.ico-menu

<button class="ico-b ico-menu">Menu</button>
<button class="ico-a ico-menu">Menu</button>
<button class="ico-btn ico-menu"><span class="vis-hidden">Menu</span></button>

Close

Token
--ico-close
Utility
.ico-close

<button class="ico-b ico-close">Close</button>
<button class="ico-a ico-close">Close</button>
<button class="ico-btn ico-close"><span class="vis-hidden">Close</span></button>

Search

Token
--ico-search
Utility
.ico-search

<button class="ico-b ico-search">Search</button>
<button class="ico-a ico-search">Search</button>
<button class="ico-btn ico-search"><span class="vis-hidden">Search</span></button>

With the search box utility provided with the forms & buttons:

 
<search class="mb-3">
  <form action="#" class="search">
    <label for="docsearch" class="vis-hidden">Find a doc</label>
    <input type="search" id="docsearch" name="q">
    <button type="submit" class="ico-btn ico-search"><span class="vis-hidden">Search</span></button>
  </form>
</search>
Previous: Theme switch
Next: Return home