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
Related
The problem only appears on my homepage. On the other pages it works fine. My site is https://www.eviakussens.nl. The social media icons are in the footer. I have been struggling for some hours now to try and fix it, but I'm unable to find the issue. I probably think something is overwriting the CSS code of these elements, but I can't find what's causing this. Who knows what's causing this and how to solve it?
Thanks in advance!
On homepage you have your font-family set to "Font Awesome 5 Free", but on other pages it is set to FontAwesome.So apply the desirable font-family to your icons:
.home .fa, .home .fas {
font-family: FontAwesome!important;
}
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.
Studying webpages to learn html/css/javascript
Got confused when I thought that most images were linked to or loaded locally... It seems like on spotify their search button is using something I don't understand to load the magnifying glass.
.spoticon-search-32:before {
content: "\f141";
font-size: 32px;
}
If I edit content the picture of the search button goes away so I know its the content that is responsible for the picture. But where the hell is it loading it from? it's not a .png or .jpg extension either...
They are using a font that contains those icons. I don't know which one they are using but here is another example:
http://astronautweb.co/snippet/font-awesome/
element:before {
content: "\f000";
font-family: FontAwesome;
This loads the icon. Now you only have to apply the css selector on a span or i or something else.
It is something called an icon and it is basically a font which is why a size can be specified to make it larger or smaller. I suggest looking at Font Awesome to get a better understanding.
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 :-)
I have tried to change font size of jqxtree, but nothing worked.
Below are the tries:
Appliced embbed style for jqxtree div
<div id="jqxTree" style="font-size: 8px;"></div>
Appliced css style for jqxtree div
<div id="jqxTree" class="treeClass"></div>
.treeClass{
font-size: 8px;
}
I googled and found that font size can be changble by custom theme. But I am looking for is there any way just change the font size of jqxtree without using custom theme. I know that custom theme is good option but right now my requirement is very small. As just want to change the font size do I need to load such a big js file and assuming may face any other issues and understanding css code bit stuff.
Url for change font size via custom theme: http://www.jqwidgets.com/community/topic/changing-font/#post-22806
Note: loading data via JSON. I looking to fix this issue by css if possible.
Please help me to fix this issue by simple way. Thanks in advance!!
This issue was resolved.
#jqxTree li{
font-size:8px;
}
Please refer the below fiddle,
http://jsfiddle.net/zp5qeqn5/
Thanks to all!!!