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>
Related
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.
this is driving me crazy :
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fcc1" style=""></i>
<i class="fa fa-whatsapp fa-stack-1x fa-inverse fccc1"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fcc2" style=""></i>
<i class="fa fa-camera-retro fa-stack-1x fa-inverse fccc2"></i>
</span>
<style>
.fccc1:hover, .fccc2:hover, {
color:#115ebb!important;
}
.fccc1:hover + .fcc1 {
color:white!important;
}
.fccc2:hover + .fcc2 {
color:white!important;
}
</style>
The first CSS rule for the hover is working perfectly.
However the second and third css rule to change an other class when hovered is not working. I dont see any errors in the code and to my understanding this should work. I also tried with out the + and with a ~ selector.
Any help appriciated.
Here is a trick to traverse upwards, visually, using flex and order
body {
background: gray;
}
.fa-stack {
display: flex;
flex-direction: column;
}
.fa-stack i:nth-child(1) {
order: 2;
}
.fa-stack i:nth-child(2) {
order: 1;
}
.fccc1:hover, .fccc2:hover {
color: #115ebb!important;
}
.fccc1:hover + .fcc1 {
color: white!important;
}
.fccc2:hover + .fcc2 {
color: white!important;
}
<span class="fa-stack fa-lg">
<i class="fa fa-whatsapp fa-stack-1x fa-inverse fccc1">Second</i>
<i class="fa fa-circle fa-stack-2x fcc1" style="">First</i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-camera-retro fa-stack-1x fa-inverse fccc2">Second</i>
<i class="fa fa-circle fa-stack-2x fcc2" style="">First</i>
</span>
Your first rule handles both .fccc1 and .fccc2, which both exist.
Your second rule, though, is for an .fccc1 element following another .fccc1 element. In your case, that doesn't exist. The preceeding element is .fcc1 instead. Your rule would need to be:
.fcc1:hover + .fccc1
div + p - Selects all <p> elements that are placed immediately after <div> elements
For reference - CSS Selectors
I'm an aspiring web designer and need help with an issue I'm having. I have an icon in Font Awesome that I want to change colour/style when I hover on it.
Here is the default style I'd like to use:
CSS
.fa-circle {
color:red;
}
HTML:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>
http://jsfiddle.net/94n0zxbt/2/
and here is what I'd like to have it change to on hover:
http://jsfiddle.net/94n0zxbt/5/
CSS
.fa-circle {
color:white;
border-color: red;
border-radius: 90px;
border-style: solid;
}
.fa-arrow-right {
color: red;
}
HTML
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>
Thanks,
Ashley
The reason the normal :hover css isn't working is that the <i> tags are overlapping each other. If you put the arrow <i> tag inside the circle <i> it will work:
http://jsfiddle.net/pjpwea/94n0zxbt/6/
You will notice that the arrow has gotten twice as big (I assume this is from the '2x' class), not super familiar with Font Awesome but there is probably an easy fix.
I am trying to place fa-graduation-cap inside a circle.
So, that means:
<span class="fa-stack">
<i class="fa fa-circle fa-stack-4x text-primary"></i>
<i class="fa fa-graduation-cap fa-2x"></i>
</span>
But it doesn't work. The output is this:
The graduation-cap is outside the circle. Why is that?
Note:
text-primary is the bootstrap class for color.
You're not applying those classes in the correct way/order.
Following the code from the examples, here we go.
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-graduation-cap fa-stack-1x fa-inverse"></i>
</span>
If you want it to be bigger just add a class fa-2x, fa-3x, fa-4x or fa-5x to the span, nothing else.
Check it on this fiddle.
How are you trying to put the elements together with CSS ?
you probably need to position the icons individually to place them where and how you want them. This could possibly be done with the following:
.fa-stack{position: relative;}
.fa-circle{position:absolute; top: 10px; left: 10px;}
.fa-graduation-cap{position:absolute; top: 20px; left: 10px;}
you can move the icons over the screen by changing the pixels in the top value and the left value for example.
I want to stack the two Font Awesome icons fa-star and fa-star-half, but I am having alignment issues. See image below:
Here is my HTML:
<span class="fa-stack">
<i class="fa fa-fw fa-lg fa-star-half fa-stack-1x"></i>
<i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>
...and my CSS:
a-stack i.fa-star {
color:transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
Note that I do not want to use fa-star-half-o which has an unappealing design when used with an outline.
I have tried to use "float," but without success. If I use "margin-left," the spacing is off. See image below:
Any help is appreciated. Thanks!
Jesse
Use the following margin-left to line up the image. Check it out here: https://jsfiddle.net/f63h157x/1/
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
margin-left: -5px;
}
I think all you need to do is apply a text-align: left; to both of the <i /> elements and it should align properly without needing to use margin-left: 5px;
One viable solution is to use fa-star-half-o instead of fa-star-half.
<span class="fa-stack">
<i class="fa fa-fw fa-lg fa-star-half-o fa-stack-1x"></i>
<i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>
This way the width of the half-star is the same as the width of full stars, and your icons will stack up. No custom margins required.