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
Related
If I would need to add a tooltip to a disabled button, I would just wrap the button and place the tooltip on the wrapper.
But how can I add a tooltip to a disabled button if the button is part of a button group? I of course could again use a wrapper, but the button group wouldn't look correct anymore. I would like to not add any extra css for this.
<div class="btn-group btn-group-sm">
<button class="btn btn-success" type="submit" (click)="...">
...
</button>
<button class="btn btn-secondary" type="button" (click)="...">
...
</button>
// this is bad as it breaks the button group style
<div [ngbTooltip]="someConditionThatCanBeTrue ? 'tooltipMessage' : ''">
<button class="btn btn-sm btn-danger" type="button"
[disabled]="someConditionThatCanBeTrue" (click)="...">
...
</button>
</div>
</div>
You can do it by simply adding btn-group btn-group-sm class to the:
<div **class="btn-group btn-group-sm"** [ngbTooltip]="someConditionThatCanBeTrue ? 'tooltipMessage' : ''">
.....
</div>
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>
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>
How can I insert a button inside the dropdown list in ui-select2? Tried to search but can't find any.
Sample image.
See ui-select2 documentation.
https://github.com/angular-ui/ui-select
You can do this instead
<div class="input-group">
<--- ui-select here --!>
<span class="input-group-btn">
<a class="btn btn-default" href="" target="_blank"><i class="glyphicon glyphicon-plus"></i></a>
</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