How to add a Glyphicon search icon to my search button. This is the bootstrap code for the button.
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
How can i add glyphicon glyphicon-search in replace of the Submit text?
Replace the Submit text with the following span:
<span class="glyphicon glyphicon-search"></span>
More details on glyphicon codes can be found here.
I personally use font-awesome as I like their constant updates to their icon base.
Just append a span element with the glyphicons class to the button.
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Submit
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
Search
</button>
Related
I am trying to create a button group with css bootstrap framework.
I was able to create button-group with no problem. But, one of my buttons should be wrapped with a form to perform post request when clicking it.
Here is my code
<div class="btn-group btn-group-xs pull-right" role="group">
<a href="/salecategories" class="btn btn-primary" title="Show all salecategories">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
</a>
<a href="/salecategories/2/edit" class="btn btn-primary" title="Edit SaleCategory">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<form method="POST" action="/salecategories/salecategory/2" accept-charset="UTF-8" style="display: inline;" novalidate="novalidate">
<input name="_method" value="DELETE" type="hidden">
<input name="_token" value="8123RX6LbCpxo7LDdp3eettEXGzdfbS9gvzjbbWP" type="hidden">
<button type="submit" class="btn btn-danger btn-xs" title="Delete SaleCategory" onclick="return confirm("Confirm delete?")" id="sometest">
<span class="glyphicon glyphicon-trash" aria-hidden="true" title="Delete SaleCategory"></span>
</button>
</form>
</div>
The above code work but the "red button" is not aligned with the rest at the following screenshot shows.
How can I align the "red" button with the other two?
Here is a jsfiddler to allow you to tinker with the code. Note, the fiddler shows the button now connected but the screenshot shows not aligned because I am using a different font for my app.
You can wrap the whole button group in the form. That way you can keep the three buttons together side by side.
<form action="/salecategories/salecategory/2">
<div class="btn-group btn-group-xs" role="group">
Show all
Edit
<button type="submit" class="btn btn-primary">Delete</button>
</div>
</form>
Glyphicons in Bootstrap button addons cause the button to shrink so it doesn't fit the input properly. Standard text doesn't have this problem.
Is there a way to do this? Here's an example:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
But changing the button to something like the following works fine.
<button class="btn btn-default" type="button">XXX</button>
This answer suggests the font size is inherited from the parent element but I don't think that applies here as it works fine with text, and changing the font-size rule doesn't help.
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
I am working on a prestashop module and I am trying to use a Boostrap glyphicon as a button in my template, but it does not work and I can not figure out why.
<td>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-cloud-download"></span>
</button>
</td>
My column stays empty, prestashop documentation shows this example but it it does not work either
<div class="form-group has-warning">
<label class="control-label" for="input1">Label with warning</label>
<input type="text" class="form-control" id="input1">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
Is it something to add to prestashop ? Did I miss something ?
It depends on the button you need, for example if it's a "panel-footer" button you can use:
<button type="submit" class="btn btn-default pull-right" name="submitTest"><i class="process-icon-download"></i> Download</button>
or for link button:
<a href="#" title="Download" class="btn btn-default">
<i class="icon-cloud-download"></i> Download
</a>
In the default-bootstrap theme, prestashop doesn't use exactly the classical bootstrap glyphicon classes but some custom one.
In your example you can use
<td>
<button type="button" class="btn btn-default btn-lg">
<span class="icon icon-cloud-download"></span>
</button>
</td>
To resume you have just to replace glyphicon by icon.
enter code here
Good Luck
This is my button group that using bootstrap template:
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-primary btn-xs">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
<label class="btn btn-default">%100</label>
<button type="button" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
And it looks like this:
Button groups are not same alignment. I want fixed label size. This is an ugly appearence.
Try creating a css class to set the width of the text content:
.btn-group label{
width: 100px;//or any other size
}
Say I wanted to use a glyphicon as a submit button for a form. How would I go about doing this?
To elaborate, I want no 'visible' elements of a traditional button. Just a glyphicon, as it would appear normally in text.
I have tried using <button> and <input type='button'> with the glyphicon classes, and (as one would expect), no luck.
You can use the .btn-link class to have a button appear as a text link:
<form>
...
<button type="submit" class="btn btn-link">
<span class="glyphicon glyphicon-star"></span>
</button>
</form>
See this demo fiddle
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
Give this a read