I want to use this bootstrap notification menu
http://www.bootply.com/oasBuRC8Kz#
but need to include the number of notifications to the upper right of the glyphicon. I read through the documentation for glyphicon. I didn't see that option. I want something similar to the option that linkein has with their menu options. Thanks,
You can see the documentation of glyphicon in :
http://getbootstrap.com/components/
And if you need the number in notifications go to badges:
http://getbootstrap.com/components/#badges
Just combine both to get the result:
https://jsfiddle.net/0rr2s5t5/
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span class="badge">4</span>
</button>
Related
I have a table like below with a custom toolbar icon in the top left.
This icon enables/disables the Filter Control.
It is setup like:
<div id="toolbar">
<button id="filterable" type="button" class="btn btn-secondary">
<i class="fas fa-sliders-h"></i>
</button>
</div>
<table>
..
</table>
Is it possible to integrate this custom icon in the other icons on the right side?
E.g. after the pagination switch icon?
Its currently not possible with the bootstrap-table internal functions.
But there is a pull request which allows adding custom buttons.
How to get the clarity drop down open or close state to toggle the caret up or down icon?
dropdowns
This is not done intentionally, though you can do it yourself fairly easily by wrapping the template with a two-way binding like:
<button type="button" class="btn btn-outline-primary" clrDropdownTrigger>
Dropdown
<clr-icon shape="caret down" *ngIf="!buttonOpen"></clr-icon>
<clr-icon shape="caret up" *ngIf="buttonOpen"></clr-icon>
</button>
<ng-template [(clrIfOpen)]="buttonOpen">
<clr-dropdown-menu>
...
</clr-dropdown-menu>
</ng-template>
https://stackblitz.com/edit/clarity-icurbz?file=app%2Fapp.component.html
I never had this kind of problem - and I don't know why..
some icons are missing and appearing blinking with "?/!"
what is happening?
Its a submit button. I have the same icon in another button - and it's ok there.
<button type="submit" id="submit"
class="btn btn-inv btn-lg" style="--h: #822584"
onclick="javascript:document.getElementById('classid').value='WAI-04'">
<i class="fa fa-thumbs-o-up"></i> SIGN!
</button>
any idea?
tks!!
If you are using the newest version of Font-Awesome, fa is no longer a valid class. It has been replaced with fas (solid), and fab (brands). For a thumbs up, you would use:
<i class="fas fa-thumbs-up"></i>
Here is the documentation if you want to learn more.
I have a navigation bar that has two glyphicons from bootstrap the envelope and phone I want my phone icon to disappear when screen reaches <768px so I used the bootstrap class .hidden-xs but it doesn't work, any help? My code is
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-phone"; class="hidden-xs"></span>
That's not how you assign multiple classes to an element. There should only ever be one class="" attribute...
<span class="glyphicon glyphicon-phone hidden-xs"></span>
Separate the individual classes with a space.
I have this simple thing to do in angularjs that require a bit of dom manipulation, and i think it suppose to be a directive of some kind but i have no idea how to approach it.
I have this simple button: (html)
<button class="btn btn-success" style='margin-bottom:17px' style='margin-right:5px;' ng-show='pageToShow < pages.length-1' ng-click='changePage("next")'>
<span class="glyphicon glyphicon-arrow-right" style='margin-right:5px' aria-hidden="true"></span>Next
</button>
When i click it, i want inside of it, instead! of the glyphicon, a moving gif, like this:
1) How to remove the already existing img inside of the button and replace it?
2) I want to have other types of spinners, not the rounded one, how can i change the default spinner?
How can i do so?
Check out this directive, it does exactly what you want:
(offine)
And a demo:
(offline)
You can change the classes of the button-prepend="" and spinner-icon="" to a css-class that defines your own spinners/gifs.
You can create your own loading gif with http://www.ajaxload.info. Then, use ng-show to determine if the gif or icon should be visible.
<button ng-click="loading = !loading;" class="btn btn-success">
<img ng-show="loading" src='http://i.imgur.com/1HDbs9b.gif' />
<span ng-show="!loading" class="glyphicon glyphicon-arrow-right"></span>
Next
</button>
http://plnkr.co/edit/6N4x5bZyiilV2GMqCP48?p=preview