Html/css - Adding An Icon To A Button

I making some css buttons and I want to add an icon before the text, 'Button Text'. But I dont know how I should do this... HTML

Solution 1:

You could add a span before the link with a specific class like so:

<divclass="btn btn_red"><spanclass="icon"></span><ahref="#">Crimson</a><span></span></div>

And then give that a specific width and a background image just like you are doing with the button itself.

.btnspan.icon {
    background: url(imgs/icon.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
}

I am no CSS guru but off the top of my head I think that should work.

Solution 2:

Here's what you can do using font-awesome library.

button.btn.add::before {
  font-family: fontAwesome;
  content: "\f067\00a0";
}

button.btn.edit::before {
  font-family: fontAwesome;
  content: "\f044\00a0";
}

button.btn.save::before {
  font-family: fontAwesome;
  content: "\f00c\00a0";
}

button.btn.cancel::before {
  font-family: fontAwesome;
  content: "\f00d\00a0";
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"/><!--FA unicodes here: http://astronautweb.co/snippet/font-awesome/--><h4>Buttons with text</h4><buttonclass="btn cancel btn-default">Close</button><buttonclass="btn add btn-primary">Add</button><buttonclass="btn add btn-success">Insert</button><buttonclass="btn save btn-primary">Save</button><buttonclass="btn save btn-warning">Submit Changes</button><buttonclass="btn cancel btn-link">Delete</button><buttonclass="btn edit btn-info">Edit</button><buttonclass="btn edit btn-danger">Modify</button><br/><br/><h4>Buttons without text</h4><buttonclass="btn edit btn-primary" /><buttonclass="btn cancel btn-danger" /><buttonclass="btn add btn-info" /><buttonclass="btn save btn-success" /><buttonclass="btn edit btn-link"/><buttonclass="btn cancel btn-link"/>

Fiddle here.

Solution 3:

<a href="#" class="btnTest">Test</a>


.btnTest{
   background:url('images/icon.png') no-repeat left center;
   padding-left:20px;
}    

Solution 4:

Simplest button with emoji icon

button {
  line-height: 25px;
}

button::before {
  content: "🔎 ";
}

<button>Search</button>

Share