So why don't you use <i>
tag for your edit button? Try this:
<button type="submit" name="edit" class="edit-button btn btn-primary">
<i class="icon icon-edit icon-white"></i>
Edit
</button>
Question
I would like to add a Twitter bootstrap glyphicon to replace the image reference in the CSS file below though not sure how.
.edit-button {
background: url('../img/edit.png') no-repeat;
width: 16px;
height: 16px;
}
In HTML I would add it as follows:
<i class="icon-search icon-white"></i>
Any ideas?
update - tried the following though it only shows width and height in Firefox's firebug:
.edit-button
{
/* background: url('../img/edit.png') no-repeat; */
background: url(../img/glyphicons-halflings.png) no repeat -96px -72px !important;
width: 16px;
height: 16px;
}
not sure why it's not being picked up ?
Solution 2
So why don't you use <i>
tag for your edit button? Try this:
<button type="submit" name="edit" class="edit-button btn btn-primary">
<i class="icon icon-edit icon-white"></i>
Edit
</button>
OTHER TIPS
I like using the :after or :before method...
HTML
<a href="http://glyphicons.com/" class="arrow">Click Here</a></div>
CSS
.arrow:after {
font-family: "Glyphicons Halflings";
content: "\e080";
}
This should work assuming you have the glyphicon fonts (they come free with Bootstrap)