i designed a navbar having some drop down menu items which are all on vertical lines, how do i place them on horizontal line or side by side??
The code for my drop down menu....
Log In
Log In Via:
<div class="social-button">
<i class="fa fa-facebook"aria-hidden="true">Facebook</i>
<i class="fa fa-twitter" aria-hidden="true">Twitter</i>
<i class="fa fa-instagram" aria-hidden="true">Instagram</i>
</div>
</div>
</li>
</ul>
</li>
<div class="social-button d-flex flex-row">
<i class="fa fa-facebook"aria-hidden="true">Facebook</i>
<i class="fa fa-twitter" aria-hidden="true">Twitter</i>
<i class="fa fa-instagram" aria-hidden="true">Instagram</i>
</div>
If you are using Bootstrap 4
Moreover, have a look to flex, it's really important :)
https://getbootstrap.com/docs/4.1/utilities/flex/
just a quick one. I have 3 Font Awesome icons that i'm using for contact buttons on my page. These are aligned vertically and centered within a container div. I also have text next to each icon, which results in both icon and text being centered on the page. What i'm after is to center the icons vertically and have the text follow separately. I believe I could wrap the icons in a container then all the corresponding text in another container, but I realise this would look messy in my CSS. There must be a simple answer out there that i'm not realising. If you don't understand what i'm going on about please view the code snippet below. Thanks for any feedback.
<section class="contact-main">
<div class="container">
<div class="email">
<i class="fas fa-envelope fa-3x"><p> Email</p></i>
</div>
<div class="phone">
<i class="fas fa-phone-square fa-3x"><p> Phone</p></i>
</div>
<div class="facebook">
<i class="fab fa-facebook-square fa-3x"><p> Facebook</p></i>
</div>
</div>
</section>
You can use fixed-width icons with class fa-fw . Here is the link.
HTML
<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 hope it helps.
Something like this? Fiddle
<body>
<section class="contact-main">
<div class="container">
<div class="list-group">
<div class="email">
<i class="fa fa-envelope fa-3x fa-fw"></i><h3 style="display:inline-block;">Email</h3>
</div>
<div class="phone">
<i class="fa fa-phone-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Phone</h3>
</div>
<div class="facebook">
<i class="fab fa-facebook-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Facebook</h3>
</div>
</div>
</div>
</section>
</body>
Was overthinking the whole thing. I just moved them into alignment using position: relative. Lightbulb finally lit up!
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%;
}
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;
}
What's the best way to get a space between the link/paragraph and the icon?
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i>Change
Doesn't work to just put a space before the text because it will be changed back when you minify/uglify the project.
I tried with all kinds of padding and margins. Can't get them to separate.
I would use the .fa-fw class. For example: <i class="fa fa-cog fa-fw"> This adds a visual space (that won't get stripped out) and it's consistent, so when/if the elements stack it looks a lot better.
Instructions: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
Don't know if is the best but you can add some margin-right to the i element:
i {
margin-right: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i>Change
Old question but I didn't liked any of these answers so I did it this way:
<i class="fa fa-cloud"></i> <span class="ml-1">Resume</span>
I kinda hate CSS or dirty html and I prefer working only with classes but fa-fw isn't useful with some icons. Not sure if span is the way to go but it looks good in my project.
So you can just wrap your text around something and give it a margin in which direction you want.
I guess i is display: inline so you'll have to set its display to inline-block for margin-right to work :
i {
display: inline-block;
margin-right: 1em;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i>Change
There are 2 spaces you need to add to make the UI look good. First, before the icon and a little space in between the icon and the text field.
So for the first case you need to add a font awesome class
fa-fw
class. for the second case, we just need a Non-Breaking Space.
 
This way you will not need an extra class to be added.
Below is a sample code to explain this.
<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>
Since I just came across the same question I took a closer look at Christina's suggestion from the font-awesome example page (sorry, I'm not allowed to just comment yet).
<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>
The most distance here is gained by (see screen 1) rather than from fa-fw see screen 2 since this is just unifying the width of the font-icon itself, so for a nicer look you may want to go for both.
(which will be interpreted as a space then) also should not make any troubles while minifying based on some quick tests.
Just use this:
a > i{
padding-right:10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply "></i>Change
<i class="fa fa-cloud mr-2"></i>
This integrates Bootstrap as well as does not require for any extra tags!
None of the answers here worked for me. I had to do this:
<i class="fa fa-reply"><span>Change</span></i>
i span {
display: inline-block;
margin-left: 0.3rem;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-reply" style="padding-right:5px"></i>Change
you can do inner css after -class="fa fa-reply"- put -style="padding-right:5px"-
note: if you doing more then one icon type the padding size will be different by 1 or -1 px
or just put a space before the word like this
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css" rel="stylesheet">
<i class="fa fa-reply"></i> Change