Icons

Icon in the generic sense can mean by image, svg, or font icon kit. Pretty Checkbox works with all three ๐ŸŽ‰

Icons

Using icons is easy as eating pie ๐Ÿฅง. It can be done in three easy steps:

  1. Add p-icon to the root div
  2. Add your icon before the label
  3. Add an icon selector to the tag containing the icon font
<div class="pretty p-icon">
<input type="checkbox" />
<div class="state">
<i class="icon mdi mdi-check"></i>
<label>mdi-check</label>
</div>
</div>

Supported Icon Libraries

Pretty Checkbox has been tested with the following font icons libraries:

SVG

Similar to icon, using SVG images requires the same three basic steps:

  1. Add p-svg to the root div
  2. Add your svg before the label
  3. Add a svg selector to the tag containing the SVG element
<div class="pretty p-svg">
<input type="checkbox" />
<div class="state">
<svg viewbox="0 0 24 24" class="svg">
<path fill="#fff" d="..." />
</svg>
<label>mdi-check</label>
</div>
</div>

Supported SVG Libraries

Images

Last, but surely not least, images are supported, too:

  1. Add p-image to the root div
  2. Add your svg before the label
  3. Add an image selector to the tag containing the img element
<div class="pretty p-image">
<input type="checkbox" />
<div class="state">
<img src="checkmark.png" alt="check" class="image" />
<label>check (via <code>img</code>)</label>
</div>
</div>
check
Edit this page