How to set social icons and text one by one? - html

Here is my jsfiddle link: http://s30.postimg.org/44jynnz35/Untitled_2.png
Now it shows like this http://s30.postimg.org/44jynnz35/Untitled_2.png
I need vertically align one-by-one.
<div id="social-bar">
<a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
<i class="icon icon-facebook"></i>
<span>Facebook</span>
</a>
<a href="https://twitter.com/moo9000">
<i class="icon icon-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://plus.google.com/103323677227728078543/">
<i class="icon icon-google-plus"></i>
<span>Google Plus</span>
</a>
<a href="http://opensourcehacker.com/">
<i class="icon icon-rss"></i>
<span>Blog</span>
</a>
</div>
May i know, What is the exact css property to fix this?
Thanks in advance.

Anchors are, by default, inline. Use this in your CSS:
#social-bar a {
display:block;
}

Related

Bootstrap - Align text and icons on sidebar

As we can see in the sidebar the icons are aligned left, but the text not.
So the question is: How can i align the icons and the text?
Example code is
<li [routerLinkActive]=" ['active']" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/notificaciones/listado']">
<i class="fa fa-bell"></i> {{'notifications' | translate}}
</a>
</li>
<li [routerLinkActive]=" ['active']" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/analitica-avanzada/grafica']">
<i class="fas fa-chart-line"></i> {{'advance-analytics' | translate}}
</a>
</li>
You are using FontAwesome in your example.
FontAwesome 5+ itself shows the solution:
Just use "fa-fw" in the icons-class.
https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
you should have the same width for all the icons, so in your css you can do something like:
i{
width: 12px;
margin-right: 4px;
}
Please change the values according your needs.
The best way is wrap the fontawesome <i> tag using another <span> tag, and apply a min-width value.
HTML
<li [routerLinkActive]=" ['active']" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/notificaciones/listado']">
<span class="fa-icon">
<i class="fa fa-bell"></i>
</span>
{{'notifications' | translate}}
</a>
</li>
CSS
.fa-icon {
display: inline-flex;
min-width: 20px;
justify-content: flex-start;
}

HTML hyperlinks not working

<div class="item slides">
<div class="slide-12"></div>
<div class="hero3">
<h1>Reach out at</h1>
<a href="https://www.linkedin.com/in/sowmiya-nagarajan/"
class="fa fa-linkedin"></a>
<a href="https://github.com/strangest-quark" class="fa fa-
github"></a>
<a href="https://www.snapchat.com/add/strangely-quark"
class="fa fa-snapchat-ghost"></a>
<a href="https://www.facebook.com/nagarajan.sowmiya"
class="fa fa-facebook"></a>
<a href="https://www.instagram.com/strange._.quark/"
class="fa fa-instagram"></a>
</div>
</div>
The hyperlinks in the above code snippet are not clickable. It could be a problem of another overlapping div. The links work when I use tab.
I tried z-index in different combinations, but none of them seem to work!
Find the complete html and css file in the following links:
CSS
HTML
Any help appreciated.
I added some text inside the anchor tags. But it seems you are needing to show them just as Font Awesome icons. In that case a single space character will be enough. Or well a
<div class="hero3">
<h1>Reach out at</h1>
<a href="https://www.linkedin.com/in/sowmiya-nagarajan/"
class="fa fa-linkedin"> sowmiya-nagarajan</a>
<a href="https://github.com/strangest-quark" class="fa fa-
github"> strangest-quark</a>
<a href="https://www.snapchat.com/add/strangely-quark"
class="fa fa-snapchat-ghost"> strangely-quark</a>
<a href="https://www.facebook.com/nagarajan.sowmiya"
class="fa fa-facebook"> </a>
<a href="https://www.instagram.com/strange._.quark/"
class="fa fa-instagram"> </a>
</div>
The links have no content inside them. What you can do if you want icon only links is to put the fa-* classes on a span or i tag inside the a tag like so:
<a href="https://example.com" >
<span class="fa fa-linkedin"></span>
</a>
This then causes the a tag to actually have content and be clickable.

Center Icon Separately From Corresponding Text

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!

<a> indentation produces whitespace

I'm trying to display two links. But when I use the correct indentation the second link renders whitespace in front of the icon. Why does this happen? And is there a way to prevent it without using hardly readable code?
Creates whitespace:
<a href="...">
<i class="fa fa-pencil-square-o fa-lg"/>
</a>
<a href="...">
<i class="fa fa-trash fa-lg"/>
</a>
Creates no whitespace:
<a href="...">
<i class="fa fa-pencil-square-o fa-lg"/>
</a>
<i class="fa fa-trash fa-lg"/>

Internet Explorer Label Link Not Working

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;
}