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
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>
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>
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>
Thank you for taking a look at my question!
What I'm trying to do in bootstrap is add a textarea that have text-editor buttons in them.. "bold", "italic" and "attachment" it's supposed to look like this:
Mockup
But instead I have this:
My Results so far
The main problems I'm having is:
Hot to Prevent text in textarea from going under the editor buttons
What do I need to override in buttons to get the desired effects
By the way I'm using a bootstrap template/theme its called remark, I'm using one of their editor element:
getbootstrapadmin.com/remark/base/forms/editor-markdown.html
template/11989202
HTML I have so far:
<div>
<div class="md-header btn-toolbar btn-toolbar-btm">
<div class="btn-group">
<button class="btn-default btn-sm btn btn-pure" type="button" title="Bold" tabindex="-1" data-provider="bootstrap-markdown"
data-handler="bootstrap-markdown-cmdBold" data-hotkey="Ctrl+B"><span class="fa fa-bold">
</span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Italic"
tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdItalic"
data-hotkey="Ctrl+I"><span class="fa fa-italic"></span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Heading" tabindex="-1">
<span class="icon wb-attach-file"></span> </button>
</div>
</div>
<textarea class="form-control" rows="8" placeholder="Type something here..."></textarea>
</div>
CSS:
.btn-toolbar-btm{
position:absolute;
top:212px;
margin-left:8px;
z-index:3;
}
If you can help me in any way I will GREATLY appreciate it, you would literally save my job :/
try this code
<div class="form-group required-field-block">
<div class="col-md-12 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<textarea rows="3" size="30" value="" class="form-control" placeholder="Sporočilo"></textarea>
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
</div>
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