Is it possible to achieve something like facebook's notifications icon with Semantic UI? I.e. an icon with a red Label to show the number of notifications? Found this thread but no answers there.
I tried this:
<Icon name='bell outline'>
<Label color='red' floating>22</Label>
</Icon>
But the label doesn't show up (syntax is semantic-ui-react).
With Semantic UI you can make another icon float to the right upper corner:
<i class="huge icons">
<i class="puzzle icon"></i>
<i class="top right corner add icon"></i>
</i>
but it does't help in case you want to display some number in the corner- for intance, the number of followers or the number of messages. If you want to achieve it you have to use your own css styling.
In my project I do it in following way:
<div class="ui top dropdown item">
<i class="icon bell outline"></i>
<div id="live_message_badge_main_header" class="floating ui red label hidden" style="padding:2px 3px;top: 10px;left: 47px;">
<span class='live_message_badge'> </span>
</div>
</div>
Additionally, you need corresponding js which will fill the span.
Result:
Related
I am having trouble getting my anchor text and icon to look centered with Material 15.1.2
My layout looks like this:
<mat-sidenav-container>
<mat-sidenav #sidenav role="navigation" [opened]="openSidenav">
<mat-nav-list>
<a mat-list-item routerLink="/signup">
<mat-icon>face</mat-icon>
<span matLine >Sign up</span>
</a>
The final result looks like:
I think the newer version is using flex where before it was using block. It also seems that the icon is 24px but the enclosing box is slightly bigger at 31px.
Trying to move the text with padding forces the whole block up and I can't move the anchor text up.
Any ideas?
I used display:inline-flex; to center the text as in the code below (I have used bootstrap).
<a mat-list-item routerLink="" >
<div class="d-inline-flex">
<mat-icon>face</mat-icon>
<span matLine>Sign up</span>
</div>
</a>
Its a pretty simple scenario but i can't find an in-framework solution.
I have a link with text and an icon. On hover of the link the icon should get another color than the linktext.
<a href="#" class="block text-black hover:text-red"><i class="fa fa-icon text-grey hover:text-blue"></i>
The icon hover only triggers when the mouse is over it not the link as a whole.
I know i can still write custom classes in tailwind but this is such a basic problem that I hope someone knows a better solution.
Add group class to link and use group-hover: on the icon.
<script src="https://cdn.tailwindcss.com"></script>
<a href="#" class="block p-6 border group text-black hover:text-red">
<span class="text-grey group-hover:text-blue-500">icon</span>
</a>
I have this simple user profile -https://jsfiddle.net/mt15199/fgogetrh/
I want to pull the envelope icon on the left, so I put it on span element and added a class pull-left but icons dropped and overlapped the container. Without this span element with pull left class the envelope icon and other icon sitting inside of div.
How can I fix this?
<span class="pull-left">
<a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
</span>
Whenever you are using float don't forget to use clear or else element will overlap.
See demo
Use clearfix class or clear:both; after floated element
use
<div class="clearfix"></div>
or
<div style="clear:both;"></div>
First example is from bootstrap having same style given in second one.
I would like to make an icon within a div tag clickable. See code below:
<div class="wd_home_box">
<div class="fa fa-get-pocket"> </div>
Leadership</div>
Ideally, I would like the whole box to be clickable, but I'll settle for just the icon and text obviously. Any suggestions are appreciated!
I think you are looking for something like this? https://jsfiddle.net/0j1me71m/1/
<div class="wd_home_box">
<div><i class="fa fa-get-pocket"></i> Leadership</div>
</div>
I am just pasted Font Awesome into the head of my WP themes header.php
And I know the fonts are working, but in the HTML I think I have made a mistake and I just cannot see what!!
http://goo.gl/Yoit33 - there is row of rounded boxes, 2nd row down, second in from the right.
any help I would be most grateful.
You need to remove the classes .fa and .fa-wheelchair from the a tag as the icon is actually being loaded in through the i tag.
From this:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="fa fa-wheelchair icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>
To This:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>