Horizontally aligned fontawesome icons - html

I have a unordered list where I have some font-awesome icons. I am trying to align them horizontally. When I align them horizontally they stack up on each other a bit. Not sure what I am doing wrong.
CSS:
.tbl-op ul{margin-left: 0;padding: 0;list-style-type: none;color:#2895f1;}.tbl-op li {cursor: pointer;display:inline-block;}
HTML:
<div class="btn-group tbl-op" role="toolbar">
<ul class="fa-ul">
<li><i class="fa-li fa fa-upload" title="Upload"></i>Upload</li>
<li><i class="fa-li fa fa-times" title="Delete"></i>Delete</li>
<li><i class="fa-li fa fa-edit" title="Edit"></i>Edit</li>
</ul>

much simpler, change your markup to
<ul class="fa-ul">
<li class="fa-li"><i class="fa fa-upload" title="Upload"></i> Upload </li>
<li class="fa-li"><i class="fa fa-times" title="Delete"></i> Delete</li>
<li class="fa-li"><i class="fa fa-edit" title="Edit"></i> Edit </li>
</ul>
and just style the li tags
li {
display: inline;
}
see this fiddle http://jsfiddle.net/81rqm0h7/

Problem found, live demo (with icons) http://jsfiddle.net/u0fL7rvx/
I don't know why font awesome add position:absolute to the icons. You can add the below rules to set it to static.
.tbl-op li .fa-li {
position: static;
}

Related

How can I put my bootstrap buttons in a vertical line going down in the centre of my webpage?

I was wondering how can I put my bootstrap buttons in a vertical line going down in the middle of my web page? I tried using vertical-align: top;
but it didn't work.
My site code.
Here is the HTML to the buttons I want to go down one after the other in a vertical line in the middle of the web page.
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Web Development Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">GFX Design Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">About Me</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Contact Me</span>
</li>
</ul>
As a side note if anyone could also help me with this it would be much appreciated.
How can I adjust the width of how long the <hr class="content-divider"> is but I need it to be responsive. I don't want the line to go past from where the buttons on each side end.
ul.intro-social-buttons li {
padding-bottom: 10px;
float: left;
display: block;
width: 100%;
}

inline-block will not change elements in my unordered list to horizontal display

I have three list items that are in a unordered list between some text. When I change the display to inline block it still keeps the vertical orientation. What is keeping the list items from being displayed horizontally?
div class="row">
<div class="icons">
<ul class="social">
<li><i class="fa fa-fw fa-linkedin"></i></li>
<li><i class="fa fa-fw fa-github"></i></li>
<li><i class="fa fa-fw fa-twitter"></i></li>
</ul>
</div>
</div>
Here is the CSS:
.social{
list-style: none;
display:inline-block;
}
.social li{
display:inline-block;
}
You need to put display:inline-block on li not on ul.
Try this:
.social > li {
display: inline-block;
}

How to add different icon for li list?

now how can i add my own img for a UI list (nav bar)?
Im trying to add my own icon/imgs for each ul list
my current code:
<li> <i class="fa fa-car"></i> אזורי חלוקה</li>
<img src="images/United-States-Flag-24.png" alt="US ENG" title="US English" />
<li> <i class="fa fa-envelope-o"></i> צור קשר</li>
<li><i class="fa fa-shopping-cart"></i> חנות</li>
Here is an example from the font awesome page:
http://fortawesome.github.io/Font-Awesome/examples/
first your code above does not include the ul tag, not sure if you forgot it or did not include it
the use of <i> tags is right, but maybe you did not included the font awesome in your header?
try this example and see if you get the icons to appear. I can edit this base on your feedback
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

How to get proper alignment for font awesome icons with Bootstrap Nav bar links?

Live example http://jsbin.com/wupume/1/edit
HTML
<ul class="fa-ul nav nav-sidebar">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>
According to this font-awesome example page we can use icons with unordered list but when I try to use with anchor links <a href=#"> and .nav class too icon placement is not proper.
I want to know if there is any way to have proper alignment without writing custom css.
Here's what I came up with. It seems that fa-ul and nav nav-whatever do not cooperate. I removed the fa-ul from the <ul> tag and added in nav nav-pills nav-stacked to make a vertical list. Then, I also removed fa-li from the <a> tags and everything seems to align properly:
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li><i class="fa fa-check-square"></i> List icons</li>
<li><i class="fa fa-check-square"></i> List icons</li>
<li><i class="fa fa-check-square"></i> List icons</li>
<li><i class="fa fa-check-square"></i> List icons</li>
</ul>
</div>
And the Bootply:
Bootply - Nav with FA Icons
Hope that helps!
A simpler solution would have been to use the fixed width class fa-fw instead of fa-ul and fa-li.
So the HTML markup would become:
<ul class="nav nav-sidebar">
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
</ul>
Live example: jsbin
Remove Nav
<ul class="fa-ul nav-sidebar">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>

Image/Link alignment issue with bottom navbar

I have a small issue. I've added a bottom navbar with 3 social icons and a text to present what are these icons. Screenshot
I would like to put this text really at the right, or left, but not like this. It does the same thing if I do in the other side.
Like that the icons would be really at the middle.
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<p class="navbar-text navbar-right text-right">Suivre l'IUT de Lens</p>
<div class="social">
<ul>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
<li><i class="fa fa-lg fa-google-plus"></i></li>
</ul>
</div>
</div>
</nav>
First, I should comment that I don't see any question marks in your "question." I would urge you to edit your question to be more clear for future readers' sake. In any case, I think I know what you are asking (the picture did help). The answer is, you need CSS!
There are more than one way to accomplish the spacing and placement you want. Here's one:
HTML (I removed some stuff that didn't seem to matter):
<nav>
<p style="width:100%">
<div class="linktext">
Suivre l'IUT de Lens
</div>
<div class="linkgroup">
<i class="link fa fa-lg fa-facebook"></i>
<i class="link fa fa-lg fa-twitter"></i>
<i class="link fa fa-lg fa-google-plus"></i>
</div>
</p>
CSS:
.link {
padding-right: 10px
}
.linkgroup{
padding-right:20px;
float:right;
}
.linktext {
padding-right:20px;
float: right;
}
So, you just need to define your properties in the CSS, then assign the relevant CSS class to your <div>/<p>/<whatever>
Here is a JSFiddle: http://jsfiddle.net/af8rpc99/