I work with bootstrap 3+. i have this code for list inline with icon :
<ul class="list-inline">
<li>
<h2><i class="fa fa-book fa-2x"></i> test link</h2>
</li>
<li>
<h2><i class="fa fa-book fa-2x"></i> test link</h2>
</li>
</ul>
this worked but icon not in middle vertical align. how do fix this problem ?!
DEMO : FIDDLE
.fa {
vertical-align: middle;
}
demo - http://jsfiddle.net/z52bL7L6/1/
Related
This is similar to other questions posted, but a bit more specific.
My goal is to create a split navbar using CSS (pure or using bootstrap), with login and signup buttons aligned to the right and other buttons to the left. On XL screens, I have the login and signup buttons change from inline-block to block display, which makes them take up two lines each. Each consists of a font awesome icon and text. With this simple change, I'm having a lot of trouble with vertically aligning the other buttons. The block buttons are centered vertically in the navbar, but the others are too high.
All flexbox-based solutions have had the side effect of removing the right-alignment of the login and signup buttons. This includes any bootstrap classes like d-flex, adding any align properties to the css file..
I could redesign the navbar to have the right-aligned items in a secondary navbar as in the solution here: bootstrap navbar floating left and right but I am pretty curious about solving / understanding this issue (and being able to implement this in the simplest way possible).
Here's how I have the html structure:
<div class="container-fluid">
<div class="row no-gutters flex-row">
<ul class="">
<li class=""> Map</li>
...
<li class="dropdown">
...
</li>
<li class="nav navbar-right " id="signup-btn">
<span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span>
</li>
<li class="nav navbar-right " id="login-btn">
<span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span>
</li>
</ul>
</div>
</div>
Custom CSS for these elements:
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: .9rem .9rem;
}
#login-btn{
float: right; !important;
}
#signup-btn {
float: right; !important;
}
#navbar li {
vertical-align: center;
}
What this looks like:
If I try some of the flex solutions posted eg, here Bootstrap NavBar with left, center or right aligned items, can't split the navbar any more:
use "text-right" class for container div - in bootstrap
If I correctly understood your task you can do like this:
Split nav into 2 blocks and move them with
.nav {
justify-content: space-between;
}
Set blocks' height equal 100% of the parent
Use 'align-items: center' inside of them
.nav__list, .nav__buttons {
height: 100%;
display: flex;
align-items: center;
}
I've created pen. I think it'll help you.
https://codepen.io/dimaaan21/pen/WNvbEvM
The other question does provide the guidance needed to achieve left and right Navbar items with text & icons.
Just use 2 navbar-nav's and justify-content-between...
<nav class="navbar navbar-dark navbar-expand justify-content-between">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item text-center">
<span class="fa fa-map"></span><span class="d-none d-sm-inline d-xl-block px-1">Map</span>
</li>
<li class="nav-item dropdown text-center">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-list"></span><span class="d-xl-block d-none"></span><span class="d-none d-sm-inline px-1">Dropdown</span> </a>
...
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item text-center" id="signup-btn">
<span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block px-1">Sign Up</span>
</li>
<li class="nav-item text-center" id="login-btn">
<span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block px-1">Log In</span>
</li>
</ul>
</div>
</nav>
https://codeply.com/go/kTGlK9Axdk/left-right
this is a bad way to solve the problem. It's better to use flexbox instead of float.
for example:
<div class="parent-box">
<div>
Map
...
</div>
<div>
<span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span>
<span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span>
</div>
</div>
.parent-box {
display: flex;
align-items: center;
justify-content: space-between;
}
I have a menu list that has a bigger distance between the last item and the item before the last. What I want to accomplish is that on scaling of the parent div's height, the distance should vanish but I also want to decrease the icons when the distance is 0 (should always be a margin-top between the items), but right now I am stuck on scaling where the last item overlaps the items before.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.4.0/css/font-awesome.min.css">
<div class="scale">
<ul>
<li>
<i class="fa fa-search"></i>
</li>
<li>
<i class="fa fa-at"></i>
</li>
<li>
<i class="fa fa-ban"></i>
</li>
<li>
<i class="fa fa-cog"></i>
</li>
</ul>
</div>
This is so far what I got
codepen: css scalable menu
I have a bootstrap tabs, and some of them have very long text, and it creates ugly space between tabs and content. How can I set the other tabs to have the same size as the biggest one?
<div class="tabs">
<ul class="nav nav-tabs nav-justified">
<li>
<a href="#" class="text-center">
<i class="fa fa-wifi"/> Not that long</a>
</li>
<li>
<a href="#" class="text-center">
<i class="fa fa-map-marker"/> Something really really really long</a>
</li>
<li>
<a href="#" class="text-center">
<i class="fa fa-map-marker"/> Not that long</a>
</li>
<li class="active">
<a href="#" class="text-center">
<i class="fa fa-star"/> Not that long</a>
</li>
</ul>
<div class="tab-content"></div>
</div>
Found a solution!
<style>
.nav-tabs{
display: flex;
}
.nav-tabs li {
display: flex;
flex: 1;
}
.nav-tabs li a {
flex: 1;
}
</style>
You can either make them all taller or you can shorten the name of the tab that's too long. Tab names shouldn't really be very long anyways.
If you can't use flexbox (which is not supported by older browsers), your only choice is to set all the tabs as tall as the tallest one explicitly with a pixel height. Flexbox is a great and sadly not yet fully usable solution to this kind of problem. Without it, there's no flexible way to accomplish this.
Sorry for posting such a simple question, but I've tried everything I can think of. How can I select my font-awesome icons in css? I'm trying to make them into an inline list, and do some other styles, but am struggling to properly select them.
My HTML:
<div class="container">
<div class="row">
<div class="twelve columns">
<ul class="social-icons list-inline">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
I'm using skeleton and am thinking it's messing me up a bit with doing the selectors right as it's my first time using it.
Your HTML looks fine. I think you just forgot to include the Font Awesome stylesheet.
Then, if you want to modify a particular class like making the list inline, just do:
.fa-twitter {
font-size: 50px !important;
}
.list-inline li {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="twelve columns">
<ul class="social-icons list-inline">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
You can use selectors .fa-twitter, .fa-facebook, .fa-instagram, .fa-linkedin... here's the fiddle "https://jsfiddle.net/DTcHh/15521/"
"https://jsfiddle.net/DTcHh/15521/"
if you want to style all of your FA icons then the selector you want is .fa
.fa {display:inline;}
i am making a list of items with the <li> tag and different FontAwesome icon for each list item in twitter bootstrap. i tried to make the list test center vertically, but cant this way
<ul class="middle">
<li>
<a href="#">
<i class="icon-cog icon-2x"></i>
very long multiline item one</a>
</li>
<li>
<a href="#">
<i class="icon-pencil icon-2x"></i>
very long multiline item two
</a>
</li>
</ul>
which produced
this is what i want to achieve
How can i achieve this?
Is this what you are looking at
http://jsbin.com/iFaWoYa/1/
ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}
<ul class="middle">
<li>
<i class="icon-cog icon-2x"></i> very long multiline item one
</li>
<li>
<i class="icon-pencil icon-2x"></i> very long multiline item two
</li>
</ul>
You may set "position:relative" to <a> tag and "position:absolute" for <i>. Then add "padding-left: <size of your icon>" to <a> and "display: block" or "display: inline-block" because without "position" it would not work. And maybe "top: 0" and "left:0" to icon for right positioning;
Try using pull-left on the icon:
<li>
<a href="#">
<i class="icon-cog icon-2x pull-left"></i>
very long multiline item one</a>
</li>
Demo: http://bootply.com/86079