Getting Started
To use Keyboard Key Icons in your project, install the package via npm:
npm install keyboard-key-icons
Basic Usage
To use an icon, add an <i> element with the class corresponding to the key you want to display. For example, to display the "A" key, you would use the following code:
<i class="key-a"></i>Sizing
You can change the size of the icons by adding the appropriate class to the <i> element. For example, to use a larger size, you can add the .key-lg class:
Relative size guide:
Example:
<i class="key-a key-lg"></i>.key-xxs
.key-xs
.key-sm
.key-lg
.key-xl
.key-xxl
Literal size guide:
Example:
<i class="key-a key-lg"></i>.key-1x
.key-2x
.key-3x
.key-4x
.key-5x
.key-6x
.key-7x
.key-8x
.key-9x
.key-10x
.key-11x
.key-12x
Coloring
You can change the color of the icons by applying a text-* (Boostrap classes) class to the <i> element.
<i class="key-c key-3x text-danger"></i>
<i class="key-c key-3x text-warning"></i>
<i class="key-c key-3x text-primary"></i>.text-danger
.text-warning
.text-primary