Is It Posible to Make an Input Checkbox a Bootstrap Glyphicon

Is it posible to make an input checkbox a Bootstrap glyphicon?

You can achieve that in a couple of methods:

Method 1

• inside a <label> tag, two <tags> that represent the icons that you want need to be placed(or outside, per use scenario)
• then toggle these two <tags>, when the input[type='checkbox'] is checked or unchecked
• done.

Method 2

• a cleaner approach to the above one, would be to use the css from bootstraps icons, and place them in a :before(or :after depending on your scenarion) on the <label> tag
• then toggle the content prop. of the :before class, that the icons that you want have, when the input[type='checkbox'] is checked or unchecked
• done.

Check out the demo here and also, a couple of more through documentation on this matter:

• Add boostrap icon to input boxes
• Boostrap checkbox documentation

Add Bootstrap Glyphicon to Input Box

Without Bootstrap:

We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn't overlap with the icon.

So for the following HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

You can use the following CSS to left and right align glyphs:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo in Plunker

Note: This presumes you're using glyphicons, but works equally well with font-awesome.

For FA, just replace .glyphicon with .fa

With Bootstrap:

As buffer points out, this can be accomplished natively within Bootstrap by using Validation States with Optional Icons. This is done by giving the .form-group element the class of .has-feedback and the icon the class of .form-control-feedback.

The simplest example would be something like this:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Pros:

• Includes support for different form types (Basic, Horizontal, Inline)
• Includes support for different control sizes (Default, Small, Large)

Cons:

• Doesn't include support for left aligning icons

To overcome the cons, I put together this pull-request with changes to support left aligned icons. As it is a relatively large change, it has been put off until a future release, but if you need these features today, here's a simple implementation guide:

Just include the these form changes in css (also inlined via hidden stack snippet at the bottom)
_{*LESS: alternatively, if you are building via less, here's the form changes in less}

Then, all you have to do is include the class .has-feedback-left on any group that has the class .has-feedback in order to left align the icon.

Since there are a lot of possible html configurations over different form types, different control sizes, different icon sets, and different label visibilities, I created a test page that shows the correct set of HTML for each permutation along with a live demo.

Here's a demo in Plunker

P.S. frizi's suggestion of adding pointer-events: none; has been added to bootstrap

Didn't find what you were looking for? Try these similar questions:

• Add Twitter Bootstrap icon to Input box
• Put search icon near textbox bootstrap

Addition CSS for Left Aligned feedback icons

.has-feedback .form-control {  padding-right: 34px;}.has-feedback .form-control.input-sm,.has-feedback.form-group-sm .form-control {  padding-right: 30px;}.has-feedback .form-control.input-lg,.has-feedback.form-group-lg .form-control {  padding-right: 46px;}.has-feedback-left .form-control {  padding-right: 12px;  padding-left: 34px;}.has-feedback-left .form-control.input-sm,.has-feedback-left.form-group-sm .form-control {  padding-left: 30px;}.has-feedback-left .form-control.input-lg,.has-feedback-left.form-group-lg .form-control {  padding-left: 46px;}.has-feedback-left .form-control-feedback {  left: 0;}.form-control-feedback {  line-height: 34px !important;}.input-sm + .form-control-feedback,.form-horizontal .form-group-sm .form-control-feedback {  width: 30px;  height: 30px;  line-height: 30px !important;}.input-lg + .form-control-feedback,.form-horizontal .form-group-lg .form-control-feedback {  width: 46px;  height: 46px;  line-height: 46px !important;}.has-feedback label.sr-only ~ .form-control-feedback,.has-feedback label.sr-only ~ div .form-control-feedback {  top: 0;}@media (min-width: 768px) {  .form-inline .inline-feedback {    position: relative;    display: inline-block;  }  .form-inline .has-feedback .form-control-feedback {    top: 0;  }}.form-horizontal .has-feedback-left .form-control-feedback {  left: 15px;}

Twitter Bootstrap radio/checkbox - how to put glyphicon

On the official website, the javascript section has examples of styling groups of checkboxes and radio buttons as buttons groups. It's under the buttons section here.

Instead of having text inside the button that reads "Option 1", you would place your glyphicon instead. If you wanted only one checkbox, I suppose you could eliminate the button group and just go with a single button.

To remove the button appearance and only show your icon, use the "btn-link" class.

I haven't tried this myself, but I see no reason for it to not work.

How to use font awesome icons or Bootstrap glyphicons to act like check box

If you use a checkbox input, this becomes very simple. This css rule will set text color of the following label to green:

input:checked + label {
  color: green;
}

HTML:

<input type="checkbox" name="test">
<label for="test"><i class="fas fa-chair"></i>...</label>

How to include the glyphicon within input field?

Have managed to solve it from the given link: With optional icons

<div class="form-group has-feedback">  <label for="firstname" class="col-sm-2 control-label">Date & Time</label>  <div class="col-sm-4">    <input type="text" class="form-control" id="Date" name="Date" placeholder="Date">    <span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>  </div>  <div class="col-sm-4">    <input type="text" class="form-control" id="Time" name="Time" placeholder="Time">    <span class="glyphicon glyphicon-time form-control-feedback" aria-hidden="true"></span>  </div></div>

<div class="container">
    <fieldset class="border p-4">
        <legend class="w-auto pl-1 pr-1">Trial Restrictions</legend>
    <div class="row">
        <div class="col-md-3 ">
                <div class="form-group">
                    <div class="form-row">
                        <label for="TrialRestrictionExpirationDaysValue1">Expiration Days</label>
                    </div>
                    <div class="form-check-inline">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                        <input type="number" min="0" max="3650" class="form-control" id="TrialRestrictionExpirationDaysValue1" name="TrialRestrictionExpirationDaysValue" />
                    </div>
                </div>
        </div>
        <div class="col-md-3 ">
                <div class="form-group">
                    <div class="form-row">
                        <label for="TrialRestrictionExpirationDaysValue2">Expiration Days</label>
                    </div>
                    <div class="form-check-inline">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option1">
                        <input type="number" min="0" max="3650" class="form-control" id="TrialRestrictionExpirationDaysValue2" name="TrialRestrictionExpirationDaysValue" />
                    </div>
                </div>
        </div>
        <div class="col-md-3 ">
                <div class="form-group">
                    <div class="form-row">
                        <label for="TrialRestrictionExpirationDaysValue3">Expiration Days</label>
                    </div>
                    <div class="form-check-inline">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1">
                        <input type="number" min="0" max="3650" class="form-control" id="TrialRestrictionExpirationDaysValue3" name="TrialRestrictionExpirationDaysValue" />
                    </div>
                </div>
        </div>
        <div class="col-md-3 ">
                <div class="form-group">
                    <div class="form-row">
                        <label for="TrialRestrictionExpirationDaysValue4">Expiration Days</label>
                    </div>
                    <div class="form-check-inline">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option1">
                        <input type="number" min="0" max="3650" class="form-control" id="TrialRestrictionExpirationDaysValue4" name="TrialRestrictionExpirationDaysValue" />
                    </div>
                </div>
        </div>
    </div>
    </fieldset>
</div>