CODEWITHSUNDEEP
htmlcss
user377419
user377419

Reputation: 4989

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 <div class="btn btn_red"><a href="#">Crimson</a><span></span></div>

CSS

body {
    margin: 0;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}
/* Glassy Buttons */
.btn {
    float: left;
    clear: both;
    background: url(imgs/button_left.png) no-repeat;
    padding: 0 0 0 10px;
    margin: 5px 0;
}
.btn a{
    float: left;
    height: 40px;
    background: url(imgs/button_middle.png) repeat-x left top;
    line-height: 40px;
    padding: 0 10px;
    color: #fff;
    font-size: 1em;
    text-decoration: none;
}
.btn span {
    background: url(imgs/button_right.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
}
.btn_gray {background-color: #808080;}
.btn_green { background-color: #ADFF2F;}
.btn_blue {background-color: #0000CD;}
.btn_red {background-color: #DC143C;}

Upvotes: 26

Views: 271312

Answers (5)

Gtarafdar
Gtarafdar

Reputation: 31

You can easily do that with font awesome,

link the font awesome kit to your site's head,

then follow this method:

button {
  font-size: 1.5em;
  margin: 5px;
  Background-color: royalblue;
  color: white;
  border: 1px solid royalblue;
  border-radius:5px;
}
/button html/
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
</head>
<body>
<button>
  <i class="fas fa-thumbs-up"></i> Like
</button>
</body>

Upvotes: 1

Dmitry Vasilev
Dmitry Vasilev

Reputation: 6508

Simplest button with emoji icon

button {
  line-height: 25px;
}

button::before {
  content: "🔎 ";
}
<button>Search</button>

Upvotes: 6

vohrahul
vohrahul

Reputation: 1191

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";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="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>
<button class="btn cancel btn-default">Close</button>
<button class="btn add btn-primary">Add</button>
<button class="btn add btn-success">Insert</button>
<button class="btn save btn-primary">Save</button>
<button class="btn save btn-warning">Submit Changes</button>
<button class="btn cancel btn-link">Delete</button>
<button class="btn edit btn-info">Edit</button>
<button class="btn edit btn-danger">Modify</button>

<br/>
<br/>
<h4>Buttons without text</h4>
<button class="btn edit btn-primary" />
<button class="btn cancel btn-danger" />
<button class="btn add btn-info" />
<button class="btn save btn-success" />
<button class="btn edit btn-link"/>
<button class="btn cancel btn-link"/>

Fiddle here.

Upvotes: 22

VMT
VMT

Reputation: 201

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


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

Upvotes: 13

Jeff Treuting
Jeff Treuting

Reputation: 13510

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

<div class="btn btn_red"><span class="icon"></span><a href="#">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.

.btn span.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.

Upvotes: 29

Related Questions