After switching to fontawesome v6 using fontawesome.min.css in combination with all.min.css, a number of icons appear smaller or thinner than with v5, here some examples:
fas fa-info
v5: image v5, v6: image v6
fas fa-check-square fa-2x
v5: image v5, v6: image v6
What can I do to get the original v5-like appearance?
Related
I am having a strange issue with the Samsung galaxy tab s8. It's weirdly using the mobile media query rather than a tablet. I'm not sure how to work around this with tailwind CSS. The main issue is where it is placed on the screen. The page fits perfectly for all mobile devices. So, my concern is if I try to adjust the Samsung galaxy s8 tab then all mobile devices will move.
TailwindCSS - it is using md:mx-32
<div
class="lg:absolute xl:absolute 2xl:absolute
grid grid-cols-1 md:grid-cols-1
lg:grid-cols-3 2xl:grid-cols-3
gap-0 md:gap-2 lg:gap-2 xl:gap-2 2xl:gap-2
mt-0 md:mt-10 lg:mt-0 xl:mt-0 2xl:mt-0
top:0 lg:top-56 xl:top-56 2xl:top-80
font-arial
left:0 md:left-0 lg:left-10 xl:left-10 2xl:left-32
-mx-5 tablet:mx-32 md:mx-32 lg:mx-0 xl:mx-0 2xl:mx-0
mb-0 md:mb-0 lg:mb-10 xl:mb-10
2xl:mb-96
p-6 md:p-0 lg:p-0 xl:pt-20 2xl:p-0"
I downloaded tailwind CDN and I am serving it through a stylesheet. However, I'm not sure how to customize the breakpoint within that sheet.
Does anyone have any ideas?
Basically I want to download a font-awesome icon like this one
https://fontawesome.com/icons/window-minimize?style=solid
I need to download the image so that I can upload it to AWS. I want the version of this icon that is colored red, when I try to download the icon, it only gives me the black colored version. Is there a way to download the colored version of this icon? Or find a link that has the colored version of this icon?
If you can't help me to download the colored version of this icon, do you know of a way to change the color of the font awesome icon using a image tag?
I am currently trying (the src attribute is equal to an acutal link, I just dont want to put it on stack overflow)
<img
:src="https://..."
:alt=""
style="max-width: 120px; max-height: 20px; margin-right: 5px; color: red;"
/>
But this doesn't make the icon red
Anybody had this problem? For unknown to me reason icons appear "on angle".
<i class="fas fa-plane"></i>
i.fas.fa-plane {
font-family: 'FontAwesome';
font-size: 4rem;
}
Tried to use Power Transforms , they don`t work.
This is how the icon is suppose to be positioned:
This how it loads like :
It looks like the icon is supposed to appear flying at an angle.
https://fontawesome.com/v4.7.0/icon/plane
If you want to shift it yourself without Power Transforms, try:
<div style="-ms-transform: rotate(45deg);transform: rotate(45deg);"><i class="fas fa-plane"></i></div>
The problem was probably in different versions of the icons i was using, and different version declared in the head link (i was using bootstrap v4.x). That probably was causing conflict when i tried to use icons v5 - and they were appearing deformed.
Ps. This particular example above has different angles of the font in different versions.
I've downloaded Font Awesome on my PC and everything running sweet now.
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
I'm using Font Awesome 5.0.10 (SVG + JS) to render a few social media icons.
If I use the squared versions, they all share a common baseline and thus are aligned, but the non-squared are not, as you can see by looking at the distance between the svg box and the path in icons like these:
https://fontawesome.com/icons/facebook-f?style=brands
https://fontawesome.com/icons/linkedin-in?style=brands
I'm no SVG expert, so I'm trying to understand if there's some easy way to curb that lower empty space, and thus have icons all aligned to a common baseline.
Since you can't edit the font file directly (easily), you'll have to manually shift of on a per-icon basis, e.g.:
.fa-linked-in {
transform: translateY(1px);
}
<i class="fab fa-linkedin-in"></i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>
The reason it's not baseline-aligned is that it is centre-aligned since that's more useful in more cases.
I'm new to icon fonts.
I see fontawesome is really great, especially (from my point of view) for classes like fa-stack, fa-2x, fa-rotate-# because they increase available icons.
Fontello is super too. Especially (again from my point of view) because I can find much more icons, and using only the ones I really need. However I do not find all those fantastic fontawesome utilities in the css generated by fontello.
So the questions is:
can I use fa-xxx utilities with any icons obtained by fontello?
Alternatively, can I include fontawesome css and successfully apply it to fontello icons?
Or, alternatively, is it possible porting fa-xxx utilities into fontello.css?
UPDATE:
I tested this scenario: importing fontawesome css and apply it to fontello icons; this is the result in Google Chrome v43:
fa-stacked with mixed fontello and font-awesome icons seems to work (maybe vertical centering is not perfect, still good)
fa-2x works
fa-flip-xxx and fa-rotate-xxx do not work
fa-spin and fa-pulse do work
fa-border do work
I do not know if this is true for all browsers/platforms.
I do not know why flip and rotate do not work.
Next steps could be trying to include fontawesome classes into fontello-codes.css in order to use only fontello icon font ( --> smaller icon font)
I have a partial answer to your question.
In order to size the icons with the use of fontello only, use this css:
.fa-1x {
font-size: 1em;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}
To have the icons spinning, include fontello's animation css file so you can use the 'animate-spin' like this:
<i class="icon-phone animate-spin fa-2x">
I am currently at the same point as you were at the time of writing your question, I am now on to the stacking feature, if I find it I will update my answer. If you have already figured it out please feel free to share :-)