NS-Lib

Usage

To create an icon textbox, you will want to start with a wrapper div that has the icon-textbox class. Next, add a Bootstrap icon element. Make sure to add the icon class to the icon. Finally, add a form-control text input box.

<div class="icon-textbox">
    <span class="icon bi-telephone"></span>
    <input type="text" class="form-control" placeholder="Phone number" />
</div>

You can place the icon to the right of the textbox by putting it after the <input> element:

<div class="icon-textbox">
    <input type="text" class="form-control" placeholder="Phone number" />
    <span class="icon bi-telephone"></span>
</div>

Scaling

You can scale an icon textbox by changing the font-size of the icon-textbox div.

<div class="icon-textbox" style="font-size: 25px">
    <span class="icon bi-telephone"></span>
    <input type="text" class="form-control" placeholder="Phone number" />
</div>

<div class="icon-textbox" style="font-size: 10px">
    <span class="icon bi-telephone"></span>
    <input type="text" class="form-control" placeholder="Phone number" />
</div>

Buttons

Icon textboxes serve as a great way to add a button to a textbox. A very common use for this is a copy button:

To use an icon textbox to hold a button, simply add an onclick attribute to your icon and give it the CSS rule cursor: pointer. NS-Lib gives you a shortcut to cursor rule with the clickable class.

 <div class="icon-textbox icon-textbox-right">
    <input type="text" class="form-control" />
    <i class="icon bi-files clickable" onclick="/* Command to copy text */"></i>
</div>

Floating labels

Icon textboxes are compatible with NS-Lib floating labels:

Usage is pretty simple - simply create one wrapper div that has both the icon-textbox and floating-labels classes. Then, add your icon, textbox, and label inside the wrapper div.

<div class="icon-textbox floating-labels">
    <i class="icon bi-search"></i>
    <input type="text" class="form-control" placeholder="" />
    <label>Search</label>
</div>

You can also use a right-aligned icon, but you need to add the icon-textbox-right class to the parent div for the spacing to work correctly.

<div class="icon-textbox icon-textbox-right floating-labels">
    <input type="text" class="form-control" placeholder="" />
    <label>Search</label>
    <i class="icon bi-search"></i>
</div>

Spinners

Icon textboxes are also compatible with Bootstrap spinners. This is great if you want to show the user that you are waiting on something.

To implement a spinner, just put a Bootstrap spinner inside of the icon element.

<div class="icon-textbox">
    <span class="icon"><span class="spinner-border"></span></span>
    <input type="text" class="form-control" placeholder="Loading..." />
</div>