Shards

Shards is compatible by default with both the FontAwesome and Material Icon packs. You can place icons in almost any element without the need of adding adjustments in order for them to fit.

Below is a basic button example that also has a Font Awesome icon.

<button class="btn btn-success btn-pill">
    <i class="fa fa-download mr-2"></i>
    Download
</button>

Inside Inputs

The easiest way to use icons inside input elements would be to use a basic group addon and place the icon inside, like so:

<div class="form-group col-md-6">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1"><i class="fa fa-user"></i></span>
        </div>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
</div>

Seamless

While using the default input group addons is great, we included modifier classes that let you integrate icons seamlessly in any input element. To achieve this, simply add the input-group-seamless modifier class to any input group and modify the position using the input-group-prepend and input-group-append inner components.

<!-- Seamless Left Icon -->
<div class="input-group input-group-seamless">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <i class="fa fa-user"></i>
        </div>
    </div>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<!-- Seamless Right Icon -->
<div class="input-group input-group-seamless">
    <input type="text" class="form-control" aria-label="Text input with checkbox">
    <div class="input-group-append">
        <div class="input-group-text">
            <i class="fa fa-user"></i>
        </div>
    </div>
</div>