I have created FAB button on page that has scroll bar. My expectation is FAB button will be sticky on right down corner when page is getting scrolled. However, the button also scroll with page. This gives indication that z-index of FAB is at same level as other HTML tags but in CSS, I have specifically given z-index of FAB as 1000 (so I expect it to be higher than other element on page)
I have created fiddle to replicate issue. Can anyone please check and provide corrective action
https://jsfiddle.net/jh7mv590/2/
<div class="container">
<div class="row">
<div id="inbox">
<div class="fab btn-group show-on-hover dropup">
<div data-toggle="tooltip" data-placement="left" title="Compose" style="margin-left: 42px;">
<button type="button" class="btn btn-danger btn-io dropdown-toggle" data-toggle="dropdown">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x fab-backdrop"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse fab-primary"></i>
<i class="fa fa-pencil fa-stack-1x fa-inverse fab-secondary"></i>
</span>
</button></div>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><i class="fa fa-coffee"></i></li>
<li><i class="fa fa-comments-o"></i></li>
<li><i class="fa fa-hand-o-up"></i></li>
<li><i class="fa fa-ticket"></i></li>
</ul>
</div>
</div>
</div>
A bit late, but position: fixed; is probably what you are looking for.
.show-on-hover {
position: fixed;
bottom: 50px;
right: 50px;
}
Related
I'm trying to modify dashboard from Bootstrap. I added icons before the texts on the sidebar similar to this. I did inspect the latter but it doesn't have something special CSS codes to make the texts have a uniform number of space and alignment.
This is my code:
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="/">
<div>
<i id="icon-dashboard" class="fa fa-tachometer icon" aria-hidden="true"></i>
<span class="nav-link-text">Dashboard</span> <span class="sr-only">(current)</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/books">
<div>
<i id="icon-book" class="fa fa-book icon" aria-hidden="true"></i>
<span class="nav-link-text">Book</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/transactions">
<div>
<i id="icon-transaction" class="fa fa-handshake-o icon" aria-hidden="true"></i>
<span class="nav-link-text">Transaction</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/reports">
<div></div>
<div>
<i id="icon-report" class="fa fa-bar-chart icon" aria-hidden="true"></i>
<span class="nav-link-text">Report</span>
</div>
</a>
</li>
</ul>
Please help me figure out. I have no clue how to do it. Thanks.
The icons in question, in the example provided, apply a fixed width for a uniform layout throughout corresponding list-items; which may also have icons nested within them of varying widths.
Consider using fixed width icons by declaring the class fa-fw on icons in list-items.
Use fa-fw to set icons at a fixed width. Great to use when different
icon widths throw off alignment. Especially useful in things like nav
lists & list groups.
Font Awesome Examples - Fixed Width Icons
Code Snippet Demonstration:
.list-group {
margin: 20px;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
I am trying to implement similar to the one in the attachment.
Below is my code. i get the envelope icon but dont know how to get the expected result by placing another icon.
<i class="fa fa-envelope-o" aria-hidden="true"></i>
Thanks
.wrap{
display: inline-block;
position: relative;
}
.wrap > .fa-commenting-o{
position: absolute;
top: -3px;
left: 10px;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
<div class="wrap">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
</div>
Do you want like this?
Try this:
.text-danger {
color: #d9534f;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
<div class="container">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
</div>
Place your <i></i>s in a span like: Check Fontawesome examples
<span class="fa-stack fa-lg">
<i class="fa fa-envelope-o fa-stack-2x"></i><!--Make background icon large-->
<i class="fa fa-commenting-o fa-stack-1x"></i><!--make foreground icon smaller-->
</span>
Let me know how it works for you.
Have fun
You can overlap icons using CSS property. Try this
<span class="fa-stack fa-lg">
<i class="fa fa-envelope-o fa-stack-2x"></i>
<i class="fa fa-commenting fa-stack-2x" style="padding-left:22px;margin-top:-16px;z-index:232"></i>
</span>
check it on fiddle here
I'm trying to align 4 icons in a row for the share functionality of a website. When I was using 4 normal icons they aligned perfectly and were the same size. Now I'm trying to have one of them stacked so that it has a border and it's creating some problems
Below is code I've been playing with:
<div class="share-results">
<a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#"></a>
<a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href=""></a>
<a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href=""></a>
<a class="fa fa-2x fa-stack" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-link fa-stack-1x"></i>
</a>
</div>
This creates:
It seems like there's just a sizing problem, so I played around with using fa-lg:
And also without any sizing helper on the stacked element:
Does anyone know how to align an icon with fa-2x to a stacked icons?
There is a way to accomplish this task with minimum usage of new CSS styles:
We should use envelope which has the same style as twitter and facebook, I mean square-style with fa-envelope-square class. And make all anchor items stacked:
<div class="share-results">
<a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#">
<i class="fa fa-envelope-square fa-stack-2x"></i>
</a>
<a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href="">
<i class="fa fa-facebook-square fa-stack-2x"></i>
</a>
<a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href="">
<i class="fa fa-twitter-square fa-stack-2x"></i>
</a>
<a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-inverse fa-link fa-stack-1x"></i>
</a>
</div>
In addition to this we change margin between stacked elements to make them look as in your example:
.fa-stack { margin: -2px; }
The result would look like this:
Demo fiddle
I couldn't figure out a durable solution using the fa-* classes alone, but I did come up with a couple of ways to accomplish this that are admittedly slightly hacky, but not terribly hacky.
The first approach superimposes the fa-link icon, as text, over a normal fa fa-2x fa-square-o icon.
<div class="share-results">
<a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
<a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
<a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
<a class="fa fa-2x fa-square-o stacked" data-toggle="tooltip" title="Share by Link" data-placement="top"></a>
</div>
<style>
.stacked {
position:relative;
}
.stacked:after {
position: absolute;
font-family: FontAwesome;
font-size: .6em;
top:6px;
left:4px;
content: "\f0c1"; /*link icon*/
}
</style>
The second approach uses a combination of position: fixed and a custom font-size to help the new link align slightly better:
<div class="share-results">
<a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
<a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
<a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
<a class="fa fa-2x fa-stack stacked2" data-toggle="tooltip" title="Share by Link" data-placement="top">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-link fa-stack-1x"></i>
</a>
</div>
<style>
.stacked2 {
position: fixed;
font-size: 1.1em !important;
top: -7px;
left: -4px;
}
</style>
The second approach is a little more accurate, but I've included the first for completeness if you'd like to play around with it. Here are the end results, respectively:
And here's a CodePen example.
I'm not sure if this answers your question, but I hope this helps a little.
Since the font awesome icons are all about widths, heights and line heights I tried to create a solution where all their values were the same to (hopefully) avoid confusion and to make it easier to update moving forward.
Using the example you gave I set these CSS properties:
.fa {
/*this sets values for all icons*/
color: gray;
font-size: 50px;
line-height: 55px;
text-decoration: none;
}
.fa-link {
/*make inner icon smaller but keep line-height the same so its centered vertically*/
font-size: 30px;
}
.fa-stack-cust {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
line-height: 55px;
}
I wrapped the icons within a un-ordered list and the are now showing all on the same line. Here is the JS.Fiddle showing you a working example. You will be able to see the HTML changes even though they are minor. Hope that helps.
How can I have stacked icons and apply fixed width to both icons (or to the stack itself)?
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</p>
</div>
The above example does not result in a fixed width icon. Adding fa-fw to the span class does not resolve the issue. Thoughts?
Seems that a newer version of Font Awesome fixes this issue. I am using v4.4 below.
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<br>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
In order for the rest of the icons in the list-group to appear with the same fixed width they have to be stacked behind an empty icon.
I did not test it but what if you try :
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop" style="font-size:20px"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse" style="font-size:20px"></i>
</span> Some text
</p>
</div>
... and adjust the values to fit the width attempted.
If it works, you could overwrite the original styles .fa-stop, .fa-exclamation ... directly in your CSS stylesheet. Maybe you will have to use !important hack.
How can I overlay a number between 0 and 99 in the middle of 'icon-star-empty'?
Simply do this from the Font Awesome docs on Stacked Icons:
<span class="fa-stack fa-lg">
<i class="fa fa-star-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
Here is what I use for counter overlays (badges) with FontAwesome (FA) 5.1. Unlike using the new fa-layers method, this does not require SVG+JS. Simply add a data-count attribute to <i> markup...
CSS
.fas[data-count]{
position:relative;
}
.fas[data-count]:after{
position: absolute;
right: -0.75em;
top: -.75em;
content: attr(data-count);
padding: .5em;
border-radius: 10em;
line-height: .9em;
color: white;
background: rgba(255,0,0,.75);
text-align: center;
min-width: 2em;
font: bold .4em sans-serif;
}
Markup
<i class="fas fa-envelope" data-count="8"></i>
<i class="fas fa-address-book fa-lg" data-count="16"></i>
<i class="fas fa-bookmark fa-2x" data-count="4"></i>
<i class="fas fa-angry fa-3x" data-count="32"></i>
<i class="fas fa-bell fa-4x" data-count="2"></i>
Example
Conclusion
Some FA icon sizes may require badge size/position tweaking, but works well for my purposes. All colors/positions can be adjusted for calendar overlays, text labels, or OP's star outline.
Note
Untested, but using the same CSS should work with older FA versions by changing fas class to fa instead.
This can also be done using Font Awesome Layers using version 5.0
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bookmark"></i>
<i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
</div>
You css should look something like:
.contain-i-e-s,.icon-empty-star,.text-i-e-s{
height:100px; width:100px;
}
.contain-i-e-s{
position:relative;
}
.text-i-e-s{
text-align:center; position:absolute;
}
Your HTML might look like:
<div class='contain-i-e-s'>
<i class='icon-empty-star'></i>
<div class='text-i-e-s'>99</div>
</div>