how can i set the active-color of a i with fa to #9b0722?
My HTML looks like the following:
<div class="topbar">
<div class="container">
<!-- Topbar Navigation -->
<ul class="loginbar pull-right">
<li class="active">
<a href="#" title="Startseite">
<i class="fa fa-home"></i>
</a>
</li>
<li class="topbar-devider"></li>
<li>Kontakt</li>
<li class="topbar-devider"></li>
<li><i class="fa fa-phone"></i> +49 7147 273729</li>
<li class="topbar-devider"></li>
<li>Impressum</li>
</ul>
<!-- End Topbar Navigation -->
</div>
</div>
As simple as this:
i.fa{color:#9b0722}
if you mean on hover, then
i.fa:hover{color:#9b0722}
Assuming you mean changing the color of the icon when it's hovered, put the icon inside the anchor.
For example:
<li>
<i class="fa fa-phone"></i> +49 7147 273729
</li>
Then in your CSS then you can change the color when it's hovered like this:
a:hover i.fa {
color:#9b0722;
}
Related
I am using Boostrap 4. I have a simple 4 tab horizontal navigation. On big screens, it should display like this: "Some text [font-awesome-icon]" x 4 tabs. On small screens, it should display like this: "[font-awesome-icon]". The display part works, however, on large screen the font-awesome-icon always shows on the second line. Here is what I see;
This is my html;
<!-- Nav tabs -->
<ul class="nav nav-tabs ">
<!-- profile -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
<!-- profile image -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile-image"><i class="fas fa-images"></i></a>
</li>
<!-- password -->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#password"><i class="fas fa-unlock-alt"></i></a>
</li>
<!-- timezone -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#timezone"><i class="fas fa-clock"></i></a>
</li>
</ul>
I have tried nowrap in all locations like UL, LI, A, SPAN but no luck. I have also moved the fa-clock part to inside the span, however, then the entire text and tab disappear on small screens.
Any help appreciated.
To stop making your id card from moving to next line, float your "Some text" to left.
<li class="nav-item" >
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span style="float:left;" class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
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 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.
I have two <ul> tags with links to pages and links to social icons. How ever they are not aligned when I created second <ul> tag to have social icons like this:
Here's my site: https://bgrnature.herokuapp.com/#/contact-us
<footer>
<div id="footer">
<div class="container">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about-us">About Us</a></li>
<li><a ui-sref="faqs">FAQS</a></li>
<li><a ui-sref="contact-us">Contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right footer-icons">
<li>Copyright © 2016 </li>
<li><i class="fa fa-facebook fa-inverse" aria-hidden="true"></i></li>
<li><i class="fa fa-youtube fa-inverse" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-inverse" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</footer>
Applying padding-bottom or margin-top is not effective at all. How do I fix this?
Please put the i inside a and also give .social class some margin.
HTML
<ul class="nav navbar-nav navbar-right footer-icons">
<li>Copyright © 2016 </li>
<li><i class="fa fa-facebook fa-inverse" aria-hidden="true"></i></li>
<li><i class="fa fa-youtube fa-inverse" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-inverse" aria-hidden="true"></i></li>
</ul>
CSS
.social{
margin-top:10px;
}
Create class for the li's of the social icons and give margin-top:15px
.social{
margin-top:15px;
}
Codepen-http://codepen.io/nagasai/pen/NrpGzL
Using Twitter Bootstrap, is it possible to show menu item icons when the viewport shrinks rather than collapsing the menu altogether and just showing the three-bar button?
I have not changed the default css (other than applied the Flatly theme).
<nav id="navigation_bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- <div class="col-xs-10 col-xs-offset-1">-->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Hawksmoor</a>
</div>
#if(Auth::check())
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> Home</li>
<li class="dropdown">
<i class="fa fa-clock-o"></i> Timecard <b class="caret"></b>
<ul class="dropdown-menu">
<li>View Timecard</li>
<li>CICO</li>
<!-- <li class="divider"></li>-->
<!-- <li>Separated link</li>-->
</ul>
</li>
<li class="dropdown">
<i class="fa fa-tasks"></i> Tasks <span class="badge alert-danger">2</span><b class="caret"></b>
<ul class="dropdown-menu">
<li>View Tasks</li>
<li>Add a Task</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li><i class="fa fa-users"></i> People</li>
<li class="dropdown">
<i class="fa fa-file-text-o"></i> Policies <b class="caret"></b>
<ul class="dropdown-menu">
<li role="presentation" class="dropdown-header">Work</li>
<li><i class="fa fa-suitcase"></i> Business Conduct</li>
<li><i class="fa fa-recycle"></i> Environment</li>
<li><i class="fa fa-fire-extinguisher"></i> Health & Safety</li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Home</li>
<li><i class="fa fa-plane"></i> Holiday</li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Other</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#if (Auth::guest())
<!-- Not needed as employees will already be registered -->
<!-- <li>Sign up</li> -->
<!-- <li>Sign in</li> -->
#else
<li class="dropdown">
<i class="fa fa-user"></i> {{ Auth::user()->profile->nickname }} <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> View Profile</li>
<li><i class="fa fa-pencil"></i> Edit Profile</li>
<li><i class="fa fa-envelope"></i> Webmail</li>
<li class="divider"></li>
<li><i class="fa fa-cog"></i> Preferences</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Sign out</li>
</ul>
</li>
#endif
</ul>
</div><!-- /.navbar-collapse -->
#endif
<!-- </div>-->
</div><!-- /.container-fluid -->
</nav>
If someone could point me in the right direction it would be much appreciated.
There are two basic tasks you need to do here: 1) disable collapse 2) hide menu text
Demo: http://www.bootply.com/MWsmEO9bb4#
1) Disable the collapsing menu and hamburger icon. You'll do this by overriding bootstrap CSS like so:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
NOTE: using !important is the simplest way to do this, but it's also a bit of nuclear option as it can make your menu hard to manipulate later on. Deeper digging into bootstrap css will likely reveal some media queries you can override with more granularity... but that's more digging than I have patience for right now:)
EDIT: It just occured to me, what I suggested below is unneecessary. No custom #media-query triggered class needed, just use Bootstrap's hidden-xs like so:
2) Hide menu text at a given breakpoint like so:
<i class="fa fa-home"></i><span class="hidden-xs"> Home</span>
That's it! EDIT OVER
2) Hide menu text at a certain breakpoint. You'll do this by wrapping the text in a span with custom media query Bootstrap's hidden-xs like so:
<i class="fa fa-home"></i><span class="hidemobile"> Home</span></a></li>
CSS
#media (max-width: 992px) { /* or whatever breakpoint you want */
.hidemobile {
display:none;
}
}
There is still some behaviour there that you may want to tweak (eg: how to handle your left/right split menu, when to bring the icons closer together to avoid second menu row, etc) but this should get you going in the right direction.
PS - I updated my bootply too...