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;}
Related
I have the following card. The nav has a number of items (I kept one here for brevity).
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h3 class="card-title">title</h3>
</div>
<div class="card-body p-0">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<NavLink href="javascript: void(0);" #onclick="() => ShowSearch()" class="nav-link">
<span class="fa-li pl-5"><i class="fas fa-search" /></span>
<span class="pl-4">Search</span>
</NavLink>
</li>
</ul>
</div>
<div class="card-footer">
<NavLink href="Back" class="nav-link">
<span class="fa-li pl-5"><i class="fas fa-arrow-alt-circle-left"/></span>
<span class="pl-1">Back</span>
</NavLink>
</div>
</div>
</div>
Everything is displayed correctly, even on mobile devices.
However, I was wondering if it is possible to "transform" the nav list into a sort of toolbar (still within the card-body) and display the items next to each other and showing only their icon. Something like this:
Is it possible?
Bootstrap 4 does not have its own icon support,
but to achieve like this output use below small font library.
1)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" />
<div class="col-md-3">
<div class="card">
<div class="card-body p-0">
<ul class="list-inline">
<li class="nav-item list-inline-item">
<i class="bi bi-cart"></i>
</li>
<li class="nav-item list-inline-item">
<i class="bi bi-twitter"></i>
</li>
<li class="nav-item list-inline-item">
<i class="bi bi-person-fill"></i>
</li>
</ul>
</div>
</div>
</div>
OR
try like below using font-awesome
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--OR download above link css to any folder and call-->
</head>
<div class="col-md-3">
<div class="card">
<div class="card-body p-0">
<i class="fa fa-shopping-cart"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-user"></i>
</div>
</div>
</div>
2)
after making this icon, toolbar use #media css, to check page open in responsive mode, then show this toolbar otherwise display:none.
for ex.
.smallscreentoolbar
{
display:none;
}
.largescreentoolbar
{
display:block;
}
#media screen and (max-width: 600px) {
.smallscreentoolbar{
display: block;
}
.largescreentoolbar
{
display:none;
}
}
if any query please comment.
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.
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/
In my header I have added three elemets. Arrow, fb icon , twitter icon.
Fiddle: Fiddle
Html:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="email-input navbar-left">
<div id="error-msg" class="help-block">
</div>
</div>
<p class="navbar-text navbar-right">
Login
<i class="fa fa-play"></i>
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter-square fa-2x"></i>
</p>
</div>
Problem with this is Login text and Arrow (>) dont aligns in middle of header.
I tried changing their top-bottom margin and padding but no change.
Any help is appreciated.
Add a class in css:
.text {
float: left;
margin: 4px;
}
then wrap your login text with arrow like this:
<span class="a">Login <i class="fa fa-play"></i></span>
See: http://jsfiddle.net/D4eu9/1/
<p><i class="icon-envelope"></i> foo#foobar.com</p>
<ol>
<li>one#foobar.com</li>
<li>two#foobar.com</li>
<li>three#foobar.com</li>
<ol>
Say I want icon-envelope to appear to the left of the first <li>. I want it to appear and align with the first icon-envelope shown. How do I do this?
*Update 1: what it should look like *
[icon] foo#foobar.com
[icon] one#foobar.com
two#foobar.com
three#foobar.com
Use the <i> tag inside the LI
<i class="icon-envelope"></i> one#foobar.com
So your full code will be this way:
<p><i class="icon-envelope"></i> foo#foobar.com</p>
<ol>
<li><i class="icon-envelope"></i> one#foobar.com</li>
<li><i class="icon-envelope"></i> two#foobar.com</li>
<li><i class="icon-envelope"></i> three#foobar.com</li>
<ol>
Fiddle: http://jsfiddle.net/praveenscience/ht7Es/
We generally do this way, using padding:
<p><i class="icon-envelope"></i> foo#foobar.com</p>
<ol>
<li><i class="icon-envelope"></i> one#foobar.com</li>
<li class="no-icon">two#foobar.com</li>
<li class="no-icon">three#foobar.com</li>
<ol>
Fiddle: http://jsfiddle.net/praveenscience/ht7Es/2/
Try this:
<li><i class="icon-envelope"></i>one#foobar.com</li>
Fiddle
UPDATE:
To move the icon to the top level you need to add margins to the both icon and list item:
<li>
<i style="margin-left:-25px" class="icon-envelope"></i>
<span style="margin-left:25px;">one#foobar.com</span>
</li>
See fiddle
<ol>
<li class="list"><span><i class="icon-envelope"></i> foo#foobar.co</span></li>
<li class="list"><span><i class="icon-envelope"></i> foo#foobar.co</span></li>
<li class="list"><span><i class="icon-envelope"></i> foo#foobar.co</span></li>
<ol>
Inserting a span around the comment seems to fix the issue for me.