font awesome icon is just a square - html

I place the link in the index head tag and my main css file is being imported
<a href="github.com">
<i class="fab fa-github-square"></i>
</a>
<a href="www.sourcetree.com">
<i class="fab fa-github-square"></i>
</a>
<a href="www.bitbu.com">
<i class="fab fa-github-square"></i>
</a>

Make sure you've also uploaded the /fonts/ directory when using self-hosted Font Awesome. https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

after you sure css file is reading correctly , look at the example:
https://fontawesome.com/v4.7.0/icon/address-book
class should be like this:
<i class="fa fa-address-book" aria-hidden="true"></i>
pay attention to "fa" class

Related

Facebook and Twitter icons don't work, others do

Font Awesome is installed, and most icons work. Facebook and Twitter icons, however, do not.
I have tried changing the fa class to fab, and vice versa: neither work.
Here is the code. The top icon renders correctly:
info#site.org <i class="fas fa-envelope" style="margin-left: 5px"></i><br />
#site <i class="fab fa-twitter" style="margin-left: 5px"></i><br />
site <i class="fa fa-facebook" style="margin-left: 5px"></i>
Any suggestions on how to get the social icons working is greatly appreciated!
Fix: This was just a case of not having updated FontAwesome to the latest version, so the icon references were broken. Easy mistake! Hopefully this helps someone.
Icons work properly. Probably you made an error somewhere.
<i class="fab fa-3x fa-facebook"></i>
<i class="fab fa-3x fa-facebook-f"></i>
<i class="fab fa-3x fa-facebook-square"></i>
<i class="fab fa-3x fa-twitter"></i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>

Font awesome with the class: fas fa-user gives pack a rectangle instead of a plus sign (+)

According to this page: https://fontawesome.com/icons/plus?style=solid
<i class="fas fa-plus"></i>
should give a plus sign (+)
And according to this page: https://fontawesome.com/icons/user?style=solid
<i class="fas fa-user"></i>
should give a user sign
Instead they both return a rectangle. What is going on here?
Works fine. Maybe you included the fontawesome css file incorrectly.
<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<i class="fas fa-plus"></i>
<i class="fas fa-user"></i>
Look up for fas in the css loaded in your browser. You should see the diff

Adding a href to an i class

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>

Create link using font-awesome in a span- and i-tag in html

I am trying to create a link from some font-awesome icons within a span- and i-tag, however, this does not work. I am using the following code:
<a href="mailto:?subject=Test&body=Test">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
Try to change the version of stylesheet, Sometimes they do misbehave
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<a href="mailto:?subject=Test&body=Test">
<span class="fa fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
You may also try to change referencing to the minified version to uncompressed version. It will all depends.
your code is fine you need to add font-awesome.css file and font folder
Are you trying to layer all 3 of the icons?

Space between link and icon, fontawesome

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.
&nbsp
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