2

I've the following button and I want to add it bootstrap icon from the following link (the + icon in the begining)and currelntly its not working ,what Im missing here ?

http://getbootstrap.com/components/

This is the button

<div style="float:right; text-align:right;">
    <p>
        <input type="button" class="glyphicon glyphicon-plus"  value="Add Row" onclick="addRow()" id="add-row" />
    </p>
</div>
07_05_GuyT
  • 2,787
  • 14
  • 43
  • 88
  • http://stackoverflow.com/questions/19608873/how-to-include-glyphicons-in-bootstrap-3 - This is one great answer, you might find your answer there as well! – Hristo Georgiev Jun 01 '14 at 12:47

1 Answers1

1

The bootstrap button text is inserted via value field which cannot hold an icon, the easiest way to achieve what you are trying to do is to replicate the button using the anchor tag:

<a href="#" onclick="addRow()" id="add-row" class="btn btn-default"><i class="glyphicon glyphicon-plus"></i> Add Row </a>

Giving an anchor class btn btn-default makes it look exactly like a button, and the text can be appended with the icon.

DEMO

AyB
  • 11,609
  • 4
  • 32
  • 47
  • Thanks voted up!last question how should I change the text color to black and the icon to green? – 07_05_GuyT Jun 01 '14 at 13:09
  • @shopiaT Simply target the `i` and its class -> `i.glyphicon{ color: green; }`. [Demo here](http://www.bootply.com/TXMjPIzYgC) – AyB Jun 01 '14 at 13:11
  • Thanks ,how should I change the text to black ,Ive tried with .add-row { color: black; } which is not working ,any idea? – 07_05_GuyT Jun 01 '14 at 13:37
  • @shopiaT `.` is used for classes, `add-row` is an `id` there so you would use `#add-row{}` – AyB Jun 02 '14 at 04:37
  • Using the ` – cvrebert Jun 02 '14 at 08:25
  • @cvrebert Oh yes, that seems like a better approach. Weirdly it didn't cross my mind. – AyB Jun 02 '14 at 10:13