Been wondering for a few minutes why Font awesome icons did not appear into my application, but after writing this ultra-simple fiddle, I see that they don't appear at all even with so little code.
I am just loading the CDN and inserting an icon like this:
<!-- Font awesome stylesheet -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-camera-retro fa-5x">This is a camera</i>
<i class="fa fa-icon-remove fa-2x" style="color: red;">This is an X</i>
What am I missing?
Try this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-camera-retro fa-5x">This is a camera</i>
<i class="fa fa-remove fa-2x" style="color: red;">This is an X</i>
Here the fiddle
A couple of errors.
No fontAwesome Lib
Mistyped icon class
Solution:
Add the link below to the space provided for external resource on fiddle
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
Then change
<i class="fa fa-icon-remove fa-2x" style="color: red;">This is an X</i>
To
<i class="fa fa-remove fa-2x" style="color: red;">This is an X</i>
Note: You don't need the word icon between fa and remove.
See it working here
If using jsfiddle you have to add the following link under external resources:
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
Or use this in your head section:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Your jsfiddle updated.
Related
I have the following...
<!-- Works -->
<i class="fab fa-linkedin" slot="actionItems"></i>
<!-- Does not work -->
<mwc-icon-button icon="linkedin" slot="actionItems"></mwc-icon-button>
Also tried variations like...
<mwc-icon-button icon="fa-linkedin" slot="actionItems"></mwc-icon-button>
<mwc-icon-button class="fab fa-linkedin" icon="linkedin" slot="actionItems"></mwc-icon-button>
But can't get it so what is the deal?
As you can see in the code below, the texts on each line starts at a different location because the icons the preceded it have different dimensions which makes the text look messy. What is the best way to make it so that the texts are aligned with each other (meaning they all start from the same spot)?
.iconText {
margin-left: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<p><i class="far fa-eye"></i><span class='iconText'>Views</span></p>
<p><i class="far fa-comments"></i><span class='iconText'>Comments</span></p>
<p><i class="fas fa-file-download"></i><span class='iconText'>Download</span>></p>
<p><i class="fas fa-tags"></i><span class='iconText'>Tags</span></p>
Font Awesome has a built in class to solve this problem. fa-fw (fw = fixed width)
Apply the class to each of the icons and they will occupy the same horizontal space.
https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
.iconText {
margin-left: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<p><i class="far fa-eye fa-fw"></i><span class='iconText'>Views</span></p>
<p><i class="far fa-comments fa-fw"></i><span class='iconText'>Comments</span></p>
<p><i class="fas fa-file-download fa-fw"></i><span class='iconText'>Download</span>></p>
<p><i class="fas fa-tags fa-fw"></i><span class='iconText'>Tags</span></p>
I would set each icon width to some static value for example:
i { width: 1em }
I'm trying to make this using font-awesome stacking
I've tried two ways, but both are ugly. The problem is that fa-square and fa-square-o are different sizes, so when you stack them, they don't line up!
my fiddle
<span class="fa fa-stack">
<i class="fa fa-square fa-stack-1x"></i>
<i class="fa fa-plus-square fa-stack-1x fa-inverse"></i>
<i class="fa fa-square-o fa-stack-1x"></i>
</span>
<span class="fa fa-stack">
<i class="fa fa-square fa-stack-1x fa-inverse"></i>
<i class="fa fa-plus-square-o fa-stack-1x"></i>
</span>
The result is
I have tried to scale down the fa-square by 86% using css. However, that is very fragile, because it depends on the browser and the zoom setting. I would like the solution to look good on both Chrome and IE11 at multiple zoom levels.
This might help.
body {
background-color: tan;
font-size: 100px;
}
.fix:before {
background: #000;
border-radius: 20%;
padding: 1% 5%;
}
.fix-2:before {
background: #000;
border-radius: 20%;
padding: 1% 10%;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa fa-stack">
<i class="fa fa-square fa-stack-1x fix"></i>
<i class="fa fa-plus-square fa-stack-1x fa-inverse"></i>
</span>
<!-- Without Stacking -->
<i class="fa fa-plus-square fa-inverse fix-2"></i>
Unfortunately, if you want to use the icons of Font-Awesome, you will have to contribute to the project by making a new generation of fa-square and all the derivatives (rss-square, ...) to standardize the size of the icons.
Developers no longer accept pull-request for icons so it may take a long time before it is accepted. (As Hugues M. said, it's a known bug)
The workarounds I see:
Create your own icon based on a font (see this post), override the square unicode (f0c8) or get an other free one. (and push your solution in github). It is generic, you can dynamically change the color but it take a long time.
Or simply make an image (SVG or something else) for your project, it's quick but less malleable.
I need to put multiple fa icon a trophy that must be the container and inside a number. Something like this:
https://img.clipartfest.com/fc3163ee61d664e212d4bb9764702efa_trophy-clipart-black-and-white-trophy-number-1-clipart_1920-1920.jpeg
The code that I use is ( but is not work) :
<!-- create trophy -->
<i class="fa fa-trophy fa-4x" aria-hidden="true" style="color:#FF8000;"><span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
</i>
it is not work because the cirle is very big and it appears near to trophy and not above the trophy also the number 1 appears near the circle? Anyone can help me?
I believe you want something like this?
<i class="fa fa-trophy fa-2x"style="color:#FF8000;vertical-align:middle"></i>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x"style="color:#FF8000;">1</i>
</span>
The sizes can be changed with the font awesome classes. The font awesome stacking works by placing elements on increasing layers, so the first thing in the span will be on the bottom.
EDIT: moved trophy out and added styling to it. Although you generally shouldn't do styling like this
Your markup is wrong, try the following:
.trophy {
position: relative;
/* Parent needs to be taken out of normal document flow to center the number*/
}
.trophy__icon {
color: #FF8000;
}
/* Class to center the number */
.trophy__number {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: -6%;
text-align: center;
font-size: .5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-lg trophy">
<i class="fa fa-circle fa-stack-2x trophy__background"></i>
<i class="fa fa-trophy fa-stack-1x trophy__icon"></i>
<div class="trophy__number">1</div>
</span>
Here is my page screenshot http://s30.postimg.org/44jynnz35/Untitled_2.png
html:
<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>
I have been created social links with social icons, I took source code from this link https://github.com/miohtama/FontAwesome-and-Bootstrap-social-icons-example/
I need one more link and icon, that is mailbox.
So i added code like this,
<a href="http://opensourcehacker.com/">
<i class="icon icon-gmail"></i>
<span>Email</span>
</a>
But i m not sure for mail box icon code,
I have 3 files,
1. <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
2. <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />
3. <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
So may i know, exact code for mailbox icon or where can i take?
Any help would be highly appreciated.
Thanks in advance.
It's icon-envelope
<i class="icon icon-envelope"></i><span>Email</span>
Since you are using older version of fontawesome, some icons may be missing from the file. Try using this updated library : http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css instead of older one.