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!
Related
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/
I want to add upto 6 icons in a div bar in Bootstrap as shown in the below wireframe, I have already made it in an icon bar class but my supervisor has prohibited me to do so, so I cant use any of the navigation bars or icon bars. What will be the best way to do it? Also How to keep it seperate from the below div?
The wireframe of what I want
Following is my html code:
<nav class="navbar ">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"> </i> </a>
<i class="fa fa-search"> </i>
<i class="fa fa-globe"> </i>
<i class="fa fa-envelope"> </i>
<i class="fa fa-trash"> </i>
</div>
</nav>
<div class="container-fluid">
<div class="col-sm-12" style="background-color: green;"></div> <br> <br>
Simple copy and paste
<style>
.icons_div {
margin: 0px auto;
width: max-content;
}
.icon{
margin : 0px auto;
width: 15px;
display: initial;
}
.fa {
padding: 0px 10px;
}
</style>
<div class="icons_div">
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
</div>
Hi guys this might be a silly question but i am trying to make my i class have a link to anthoer page but for some reason its not working
<ul class="get_in">
<li>
<i class="fa fa-facebook" </i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
</li>
</ul>
Again it might be silly but any help would be great , thanks x
<i class="fa fa-facebook"></i>
You can do either of this two
<i class="fa fa-facebook"></i>
or
<i class="fa fa-facebook"> </i>
But i will prefer to use the first one.
You have to finish your italic start tag with a > before you write your anchor start tag.
<i class="fa fa-facebook"> </i>
I have web page with multiple hyperlinks. These hyperlinks are loaded from database so can be many of them (multiple pages). My problem - i need to keep top green ribbon in same height. But currently if all elements not fit to screen they line up and that makes my green ribbon quite big.
Code: HTML
`
<body>
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="?action=?home">
<i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li><li><i class="fa fa-pencil-square-o fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Click 1</strong></li><li><i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Click 2</strong></li><li><i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Click 3</strong></li>
<li>
<i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
</body>
`
Would it be possible to create something like little triangle and move those links (just overflowed) in? Or any ideas how to keep those in one line (but not with scroll)?
I am building a site with Zurb's Foundation framework. I have a side navigation that is working fine in every browser except IE (of course). In IE, if you try to click a sidebar link, it does not work if you try to click the text. If you click the box around the text or the icon, it works. I'm guessing this has something to do with the weird way that IE treats <label> tags, but I'm not sure how to fix it. Anyone know what I should do to get the links working?
Here is a fiddle.
<!-- Sidebar Navigation -->
<div class="sidebar left clearfix">
<div class="icon-bar vertical five-up label-right left clearfix">
<a class="item" id="home">
<i class="fa fa-home fa-2x fa-fw"></i>
<label>Home</label>
</a>
<a class="item" id="resources">
<i class="fa fa-folder-open fa-2x fa-fw"></i>
<label>Resources</label>
</a>
<a class="item" id="reports">
<i class="fa fa-pie-chart fa-2x fa-fw"></i>
<label>Reports</label>
</a>
<a class="item" id="team">
<i class="fa fa-users fa-2x fa-fw"></i>
<label>Team</label>
</a>
<a class="item" id="support-tickets">
<span class="notification-container">
<i class="fa fa-envelope fa-2x fa-fw"></i>
<span class="notification-counter">1</span>
<label>Support Tickets</label>
</span>
</a>
<!-- These Last 2 Items to Be Displayed Only On Certain Pages as Necessary -->
<a class="item" id="director-info">
<i class="fa fa-shield fa-2x fa-fw"></i>
<label>Director Info</label>
</a>
<a class="item" id="merge-accounts">
<i class="fa fa-compress fa-2x fa-fw"></i>
<label>Merge Account</label>
</a>
</div>
</div>
<!-- End Sidebar -->
I should mention that it apparently works if I remove the <label> tag, but then my CSS gets messed up. Wondering if there's an easier fix.
I was having the same issue using the foundation Icon Bar.
Try using pointer-events: none on your labels like so
.item label {
pointer-events: none;
}