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.
Related
I'm trying to add a div to each item in a Dropdown, however the item looses the bootstrap styling.
CSS
.ul.dropdown-menu li {
display: inline-block !important;
}
HTML
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Example 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div>
<a>Item One</a>
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div>
</li>
</ul>
</li>
I've created examples of the dropdown before and after the additional element to demonstrate the issue.
https://jsfiddle.net/Rob_H/nqu621vm/
For continue same style they need a tag as root otherwise you can enhance css
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Example 2
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a>
<div>
Item One
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div></a>
</li>
<li>
<a>
<div>
Item One
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div></a>
</li>
</ul>
</li>
Because bootstrap has a styles for .dropdown-menu>li>a but not for .dropdown-menu>li>div so you have to copy the needed styles from bootstrap dropdown and customize it for your needs.
Check the updated JSfiddle.
Hope this helps.
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 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/
Hi I Have a navigation bar that has a drop down menu. I would like the drop down menu to
make another drop down menu but how would I do this? Here is my code.
<ul id="navbarr">
<li class="current-page">
<i class="icon-home"></i><br />Home
</li>
<li>
<i class="icon-camera"></i><br />Cities
</li>
<li>
<i class="icon-comments"></i><br />Blog
</li>
<li><i class="icon-tasks"></i><br />Categories<ul>
<li><i class="icon-tasks"></i><br />Demographic</li>
<li><i class="icon-tasks"></i><br />Crimes</li>
<li><i class="icon-tasks"></i><br />Schools</li>
<li><i class="icon-tasks"></i><br />Lifestyles</li>
</ul>
</li>
<li>
<i class="icon-user"></i><br />About
</li>
<li>
<i class="icon-envelope-alt"></i><br />Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
How about making another unordered list inside the list element?
Like this:
<li class="current-page">
<ul>
<li>
<i class="icon-home"></i><br />Home
</li>
</ul>
</li>
I'm working on a site that uses Bootstrap 3. I need to vertically align a button along the right side of a list item. In an attempt to do this, I am doing the following:
<ul class="list-unstyled list-info">
<li class="ng-binding ng-scope">
<label style="width:initial;" class="ng-binding">First Name Last Name</label><br>
Birthdate
<a ng-click="viewDetails()" class="btn-icon-round btn-icon-round-sm bg-success pull-right" style="vertical-align:middle;"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
How do I vertically center the icon in the right margin of the list item? I will have additional list items. For that reason, I need it in a list. However, I'm not sure how to do that.
Thank you!
One way to make it happen is to do something like this:
<ul class="list-inline">
<li>
<ul class="list-unstyled list-info">
<li class="ng-binding ng-scope">
<label style="width:initial;" class="ng-binding">First Name Last Name</label><br>
Birthdate
</li>
</ul>
</li>
<li>
<a ng-click="viewDetails()" class="btn-icon-round btn-icon-round-sm bg-success pull-right" style="vertical-align:middle;"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
Then pad the link to your discretion