I am using the fa-bar-chart icon, but I'd like to have the lines going from left-to-right with the x & y axis starting in the bottom left corner.
I thought I could pair both 'fa-rotate-90' and 'fa-flip-horizontal' to get there, but combining the two does not work:
<div>
<i class="fa fa-bar-chart"></i> normal<br>
<i class="fa fa-bar-chart fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-bar-chart fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-bar-chart fa-rotate-90 fa-flip-horizontal"></i> fa-rotate-90 AND fa-flip-horizontal<br>
</div>
https://jsfiddle.net/virtusts/Lmtdk5ot/
Any suggestions?
Using the following CSS:
.fa-bar-chart {
transform: rotate(90deg) scaleX(-1);
}
produces the desired outcome (bars left to right with left y axis).
Modified your JSFiddle to show the outcome.
You can use this code for Flip :
.fa-flip-horizontal {
transform: scaleX(-1);
}
Related
i am using angular and my question is simple how can i make to rotate this icon when i click on it?:
<div class="col-lg-1 col-md-4 col-sm-2 col-2 alend-text">
<i class="pomrgto iconfa fas fa-chevron-circle-right view_cir" title="Ver" aria-hidden="true" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic"></i>
</div>
the icon is the pomrgto iconfa fas fa-chevron-circle-right view_cir class, i want to do this:
When i click the icon, i want to make this rotate 90 degrees to the right making a little rotate animation, and when i click again go to the original state...
I know i can do it with css, but can you give me an idea of how can i do that?
Thank you!.
try something like this:
By default set transition property on the arrow.
On click of the icon, add a new class to it (let say "active")
then in CSS:
.pomrgto{
transition: transform 1s;
}
.active{
transform: rotate(90deg)
}
I use a font-based iconset (in my case font-awesome 4.7 icons) which is used like this:
<i class="fa fa-eye"></i>
What I would like to do is to overlay a triangle in the lower right corner so that it would look similar to the fa-eye-slash icon.
Is it possible to add a css class (like <i class="fa fa-eye bottom-right-triangle"></i>) which overlays a triangle and thus obscures half of the icon?
You can try something like this using linear-gradient and pseudo element as an ovrelay:
.hide {
position:relative;
}
.hide:after {
content:"";
position:absolute;
bottom:0;
left:0;
right:0;
top:0;
background:linear-gradient(to bottom right,transparent 50%,#fff 50.5%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<i class="fas fa-eye fa-5x hide"></i>
I want to resize the social icons on the top header of this website http://petlet.net.au/
I thought that the logo's are images but I think these logos are from a library or from external because when you inspect the code there's no <img src> code.
This is the code:
How can I resize the social icons?
Use fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-facebook-square fa-lg"></i> //smallest
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
<i class="fa fa-facebook-square fa-5x"></i> //biggest
Whenever icons are used as svg icons you can resize them by just changing font-size. They can be colored, not colored, multiple shapes, sizes, whatever.
.header .fa {
font-size: 15px; // you can increase or decrease font size as per your needs.
}
.header .fa-facebook-square {
font-size: 18px; // you can change font-sizes of different icons indiviually
}
Using font-size css property you can resize the font-awesome fonts.
Try this:
.top-header-content a{
font-size:20px;
}
For newer version use icon-2x, icon-3x etc.
<i class="icon-camera-retro icon-4x"></i>
Refer http://fontawesome.io/3.2.1/examples/
Just use font-size property of CSS to resize the social icon buttons
A long time ago I made this with font awesome:
For the life of me, I can't remember how I done it. I tried to replicate it using this:
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa fa-home fa-stack-1x"></i>
</span>
I used this resource for the above code: Stacked Icons, Twitter
The problem with this is that the house is too big, and the background isn't the same as the one I made ages ago (think #fff). On the fontawesome website it appears to have a light background, but then when implementing it into my site (background of the site is #1F1F1F), it seems to take the same background as the site.
Does anyone know how I was able to do this previously and now I'm struggling?
Problem: too big
You're using the fa-lg class. This makes it oversized. Remove this.
Problem: wrong background
Use the fa-square class (a solid rounded square, instead of outline like fa-square-o), and use CSS to make it light (with color: lightgrey).
(In the below example, I also darkened the background to better show the light background of the square).
body {
background-color: black;
}
.light {
color: lightgrey;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x light"></i>
<i class="fa fa fa-home fa-stack-1x"></i>
</span>
Weird problem with Font Awesome. I'm trying to make a larger circle around my social media icon.
If I change the first stacked icon to a size larger than 2x, it reverts back to the 1x size.
This code works:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
This code doesn't:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-3x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
If I use 3x or 4x, etc, the lower image gets set back to the normal size. Is this a bug, or am I doing something wrong here?
Using Font Awesome v 4.1.0.
EDIT - because this note keeps getting views / comments. My problem was that font-awesome only has the 1x and 2x proportions, where I wanted a much larger background image and a smaller icon (at more like like 4x).
This confused me too until I re-read the instructions a few times:
"You can even throw larger icon classes on the parent to get further control of sizing."
So you leave the icons alone and simply swap .fa-lg for .fa-2x on the parent and the child icons grow proportionately.
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
Fairly old solution and lots of similar comments above but wanted to tell one thing I ended up doing in case anyone encounters a similar thing. I needed the the outer font to be the regular size and the inner to be smaller. I didn't feel like creating a class for this since it's only used in a single place. I ended up just adding a style class to the inner font.
<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x" style="font-size:9px"></i>
</span>
If you have a 1 off that you need something similar then you could consider the above or create additional classes to do it if you are using in lots of places. If I were to create classes, I would had done something similar to (untested)
fa-stack-xs {font-size:.6em}
fa-stack-sm {font-size:.8em}
So, they could be used like
<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x fa-stack-sm"></i>
</span>
I didn't see in the documentation anything like this so my apologies if I missed it.
To get it to work as I expected it to, I changed font-awesome CSS file. At line 168, it looks like this:
.fa-stack-1x,
.fa-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-2x {
font-size: 2em;
}
Notice that the stack only has 1x & 2x options. So I added a 3x & 4x.
.fa-stack-1x,
.fa-stack-2x,
.fa-stack-3x,
.fa-stack-4x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-2x {
font-size: 2em;
}
.fa-stack-3x {
font-size: 3em;
}
.fa-stack-4x {
font-size: 4em;
}
You may have to tweak a bit more to get it to line up just right. The higher the em's go, the less they line up correctly in different browsers.
But, in the end, I ended up using a border because we wanted to do something different on phone sizes, and it was simpler to edit that CSS in the #media queries.
The class fa- thin-circle-seems to only support 2x, use CSS (font-size)
.dimensioni_fix {
font-size: 40px; /* EDIT THIS */
}
http://jsfiddle.net/itpao25/8yPDh/
It may not solve your problem but is this the kind of effect you are looking to create?
<span class="fa-stack fa-2x">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
Because font-awesome clearly specifies 1-x and 2-x for stacking and then using larger parent classes for bigger stacks.
From: http://fortawesome.github.io/Font-Awesome/examples/#stacked
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.