WEB DESIGN: USING ICONS WITH BOOTSTRAP OR ANOTHER FRAMEWORK

TARGET:

Use images for buttons or anything else applicable.
The images used on this example are from freeicons.io

Another good site to provide free icons is thenounproject.com

 

NOTE:

This method may be used for other frameworks or without any specific one.

HOW TO

1. Create a .css file containing a background image to each icon image and a common configuration class.

Name it “free-icons.min.css”.

 

2. edit and add the code below:

.icon-config{background-repeat:no-repeat;display:inline-block;vertical-align:text-bottom;border: 0px !important; border-color: transparent !important; background-color: transparent !important;}
.icon-edit28{background-image:url("../img/icon-edit_28.jpg");height:28px;line-height:28px;width:28px;}
.icon-create28{background-image:url("../img/icon-create-28.jpg");height:28px;line-height:28px;width:28px;}
.icon-delete28{background-image:url("../img/icon-delete-28.jpg");height:28px;line-height:28px;width:28px;}
.icon-update28{background-image:url("../img/icon-update-28.jpg");height:28px;line-height:28px;width:28px;}

 

3. Create each icon image having for each .icon-nameSIZE class and set its background image class.

In this example using .icon-edit28 class requires a image of size=28px:

icon-edit28{background-image:url("../img/icon-edit_28.jpg");height:28px;line-height:28px;width:28px;}

– For an image with size=30px, we create a new size class as follows:

icon-edit30{background-image:url("../img/icon-edit_30.jpg");height:30px;line-height:30px;width:30px;}

 

4. In the web page, do:

– using bootstrap:

<div class="col-md-2" style="text-align: center;">
<button type="button" id="btn_<%=sdo.i_id%>" formaction="" class="btn btn-primary icon-config icon-edit28" style="margin-top: 13px;" onclick="saveItem(this)"></button>
</div>

 

 

@FROM: lab – draft project N. rin544d