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"/>
Related
I tried to add FontAwesome icon "fa-plus", but it is not showing.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class="table-add float-right mb-3 mr-2"><i
class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
You're making a mistake there. You need to remove the extra anchor closing tag for it to work. Good luck.
Your HTMLhave errors: (two "< /a>")
<span class="table-add float-right mb-3 mr-2">
<a href="#!" class="text-success">
</a>
<i class="fas fa-plus fa-2x" aria-hidden="true"></i>
</a>
</span>
Replace with this:
<span class="table-add float-right mb-3 mr-2">
<a href="#!" class="text-success">
<i class="fas fa-plus fa-2x" aria-hidden="true"></i>
To add font awesome + icon, use "fa fa-plus"
For Example :
class="fa fa-plus"
<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.
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>
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
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;
}