Font Awesome-Bootstrap Playground

Sample page to test Font Awesome icons with BootStrap

by Alexey Demin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/js/all.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                    <input class="form-control" type="password" placeholder="Password">
                </div>
                <div class="input-group margin-bottom-sm">
                    <span class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></span>
                    <input class="form-control" type="text" placeholder="Email address">
                </div>
        </div>
    </div>
</div>

<p><input type="text" id="configName" name="configName" placeholder="Konfiguration Name" value="" /></p>
<p>
<input type="checkbox" id="isActive" name="isActive" value="1" />
<label for="isActive">Is active?</label>
</p>

<select class="form-select form-select-sm" aria-label=".form-select-sm">
    <option>default</option>
    <option>template</option>
</select>
<a class="btn btn-default" href="#"><i class="fa fa-pencil"></i>Edit</a>
<a class="btn btn-default" href="#"><i class="fa fa-trash"></i>Delete</a>
<a class="btn btn-default" href="#"><i class="fa fa-square-plus"></i>Create</a>

CSS

.container {
  margin-top: 1em;
}