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>
Related
I am using Bootstrap-4 for my new website. I am using the drop-down in multiple places of the page. In the header nav-bar the drop-down works fine but when I use the same drop-down logic inside the page, bootstrap or popper is adding some inline styles, messing up my styles. Is there a way to disable this automatic inline CSS from getting added?
Below is the screenshot of faulty drop-down in the page,
Below is the screenshot of the correct dropdown in the top header.
Edit:
Code
Faulty Dropdown
<div className="pull-right">
<div className="dropdown">
<a
href="#sfsd"
className="dropdown-toggle"
data-toggle="dropdown"
id="dropdownMenuLink"
aria-haspopup="true"
aria-expanded="false"
>
<i className="fa fa-ellipsis-v" aria-hidden="true" />
</a>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
Correct Dropdown
<div className="user-menu dropdown pull-right">
<a
href="#Menu"
className="dropdown-toggle"
data-toggle="dropdown"
aria-expanded="false"
>
<i className="fa fa-gear fa-spin" />
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>
As stated in the docs, you can use the data-display option....
"By default, we use Popper.js for dynamic positioning. Disable this
with static."
Just remember that then you'll have to handle positioning of the dropdown menu.
https://www.codeply.com/go/85fPF73EtF
Related: Bootstrap 4 dropdown menu within accordion
Please add your custom css code (it is not real solution but working )
#media (min-width: 0px) and (max-width: 991px) {
.dropdown-menu.show {
transform: unset !important;
position: unset !important;
}
}
Is navs not navbar
https://getbootstrap.com/docs/4.1/components/navs/#vertical
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-angle-right fa-fw"></i>
Link A
<span class="badge badge-warning badge-pill">140</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-angle-right fa-fw"></i>
Link B
<span class="badge badge-warning badge-pill">300</span>
</a>
</li>
</ul>
tired change
<span class="badge badge-warning badge-pill">
to
<span class="badge badge-warning badge-pill ml-auto">
but didn't work
Edited: see #Temani Afif answer below
if with d-flex only
with d-flex align-items-center solved the problem
You need to make the a element a flex container to be able to use ml-auto/mr-auto. Simply add d-flex to a:
I also added align-items-center to center but it's not mandatory:
.nav {
background:pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i class="fas fa-angle-right fa-fw"></i>
Link A
<span class="badge badge-warning badge-pill ml-auto">140</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i class="fas fa-angle-right fa-fw"></i>
Link B
<span class="badge badge-warning badge-pill ml-auto">300</span>
</a>
</li>
</ul>
This is a weird frustrating issue, as I'm working on converting code from Bootstrap 3 to 4. Navbar with a button group on the right (user name, login options, etc.)
When the button group is not a part of the navbar (not included in the menu -- I have PHP code that is not shown below that checks for a specific page if the menu (navbar) is to be displayed or not, the dropdown list appears correct -- vertical, etc. If, however, I place the button group in the navbar, the dropdown list goes horizontal.
I am sure this is because some of the code is somehow interfering with other parts, but I cannot figure it out. Stripping out the PHP code, and just showing the HTML for Bootstrap 4, this is what I have -- first with button group without the navbar:
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">hirsch</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
That code displays as expected. If, however, I insert this before the end of the collapse part of the navbar (or if I put it after, it doesn't seem to matter), it displays horizontally instead, which is ... weird:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="">Who's Who</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Disclaimer/Copyright</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul> <!-- / navbar-nav -->
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">UserName</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
</div> <!-- / collapse -->
</nav>
You should be able to copy and paste the code samples and see them if you have the rest of Bootstrap 4 set up. Click the down-caret symbol on the button group, in the first example it is vertical, in the second it is horizontal, but it's the exact same code. I am really confused where the issue is, I've been staring at this for quite some time and cannot find the problem.
Turns out that the Dropdown has changed a bit, and rather than using a UL tag and such:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
It works better (and simpler) with:
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<a class="dropdown-item" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
<a class="dropdown-item" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
<a class="dropdown-item" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>
I am useing Font Awesome 5. Some icons are not showing in Chrome. For example "fa-facebook-f". When I change the icon class to fa-facebook it works. Is there a way to fix it?
Here is what i see in chrome.
<a href="#" target="_blank" class="icon-facebook">
<i class="fab fa-facebook-f">
</i>
</a>
<a href="#" target="_blank" class="icon-twitter">
<i class="fab fa-twitter">
</i>
</a>
<a href="#" target="_blank" class="icon-google_plus">
<i class="fab fa-google-plus-g">
</i>
</a>
<a href="#" target="_blank" class="icon-pinterest">
<i class="fab fa-pinterest">
</i>
</a>
<a href="#" target="_blank" class="icon-linkedin">
<i class="fab fa-linkedin-in">
</i>
</a>
<a href="#" target="_blank" class="icon-instagram">
<i class="fab fa-instagram">
</i>
</a>
<a href="#" target="_blank" class="icon-tumblr">
<i class="fab fa-tumblr">
</i>
</a>
Import this css it will work for all the font awesome icons and also for all the versions of icons it will work.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
Add this code in your HTML file before body and style tag
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
And remember one thing that use class of that type
fab fa-linkedin
in some site it is given as
fa fa-linkedin
which is not working so use 'fab' in place of 'fa'
And you can use this icon in your website
for testing purpose you can use this code
<div class="row text-center">
<!-- Team item-->
<div class="col-xl-3 col-sm-6 mb-5">
<div class="bg-white rounded shadow-sm py-5 px-4"><img src="https://res.cloudinary.com/mhmd/image/upload/v1556834132/avatar-4_ozhrib.png" alt="" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm">
<h5 class="mb-0">Vishal Jat</h5><span class="small text-uppercase text-muted">CEO - Founder</span>
<ul class="social mb-0 list-inline mt-3">
<li class="list-inline-item"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item"><i class="fab fa-instagram"></i></li>
<li class="list-inline-item"><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</div>
Its working fine...Its maybe you are not linking the correct font-awesome file
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<a href="#" target="_blank" class="icon-facebook">
<i class="fab fa-facebook-f">
</i>
</a>
<a href="#" target="_blank" class="icon-twitter">
<i class="fab fa-twitter">
</i>
</a>
<a href="#" target="_blank" class="icon-google_plus">
<i class="fab fa-google-plus-g">
</i>
</a>
<a href="#" target="_blank" class="icon-pinterest">
<i class="fab fa-pinterest">
</i>
</a>
<a href="#" target="_blank" class="icon-linkedin">
<i class="fab fa-linkedin-in">
</i>
</a>
<a href="#" target="_blank" class="icon-instagram">
<i class="fab fa-instagram">
</i>
</a>
<a href="#" target="_blank" class="icon-tumblr">
<i class="fab fa-tumblr">
</i>
</a>
You can use "fab" in class instead of "fa"
<i class="fab fa-linkedin"></i>
This will surely work. Replace "fa" with "fab" or "fas".
Have you imported the css, js but also the etf files which describes the font ?
If yes, then try this class name instead of "fab" which is not referenced in the doc
<i class="fas fa-camera-retro"></i>
This class name works fine for linkedin:
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
used the below link in index.html under head tag :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css">
I have hideable sidebar with nav menu. Everything's use flexbox and everything's alright except expandable menu (second from above). Menu crop in the beginning in Firefox and crossing with social icons in Chromium? How to fix this? I use PostCSS's cssnext and cssfixes.
Full code: https://codepen.io/arch2/pen/dNgKxq
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" />
<div class="sidebar" id="sidebar">
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation_item">ГЛАВНАЯ</li>
<li class="navigation_item dropdown__toggle">ТЕКСТЫ
<ul class="navigation__list dropdown">
<li class="navigation_item">***</li>
<li class="navigation_item">САГА О РОНИНЕ</li>
<li class="navigation_item">МАЛО</li>
<li class="navigation_item">КЛЮВИКИ НОТ</li>
<li class="navigation_item">В КЛЮВИКАХ</li>
<li class="navigation_item">КРАСНАЯ ПЕСНЯ</li>
<li class="navigation_item">ЛЕС</li>
<li class="navigation_item">ЧЕРНОКНИЖНИЦА</li>
<li class="navigation_item">ТЕРЕМ</li>
<li class="navigation_item">ГЕРБАРИЙ</li>
<li class="navigation_item">ВНУТРИ ГЕРБАРИЯ</li>
<li class="navigation_item">ТЕПЛО БЕЗДОННОЕ</li>
<li class="navigation_item">МАЛЬЧИК-БАТИСКАФ</li>
<li class="navigation_item">ИГРУШКИ</li>
</ul>
</li>
<li class="navigation_item">О ГРУППЕ</li>
</ul>
</nav>
<address class="soc-link">
<a class="soc-link__item" href="https://vk.com/caddysmelledliketrees" title="https://vk.com/caddysmelledliketrees">
<i class="fa fa-vk" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw" title="https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw">
<i class="fa fa-youtube" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://instagram.com/caddysmellslike" title="https://instagram.com/caddysmellslike">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8" title="http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8">
<i class="fa fa-lastfm" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://soundcloud.com/caddysmelledliketrees" title="https://soundcloud.com/caddysmelledliketrees">
<i class="fa fa-soundcloud" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://caddysmelledliketrees.bandcamp.com" title="https://caddysmelledliketrees.bandcamp.com">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="mailto:info#caddysmellsliketrees.ru?subject=Общие%20вопросы"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</address>
</div>
.navigation and .soc-link should not be display: flex; you want these two to be normal block elements. The flex is causing them to overlap because they aren't respecting their children's sizes.