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;
}
Related
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;
}
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'm creating a card in bootstrap with some social media icons (Font-awesome). For some reason all my icons are treated as boxes and have a black outline around them. My hover shadows also wrap around the square rather than the icon itself.
Why does this happen and how can I fix it?
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 text-center">
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#00aced;"></i>
<i class="fa fa-twitter fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#0077B5;"></i>
<i class="fa fa-linkedin fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#171515;"></i>
<i class="fa fa-github fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
</div>
The box border is being generated by they type="button" parameter in your anchors, which has a defined -webkit-appearance: button; in bootstrap's stylesheet. So remove that type="button" parameter, or style it as desired.
As for the shadows, if you want them to keep the shape of the icon instead of being boxed, you should either use text-shadow or filter: drop-shadow instead of box-shadow
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'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"/>