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 :-)
Related
Bootstrap has a nifty way of adding an icon:
<i class="bi bi-arrow-right-square-fill fs-1"></i>
It's really nice cause I can add in the fs-1 class to control the sizing of the icon automatically.
I have my own icon in an SVG file, and would like to do the same:
<i class="bi my-custom-icon fs-1"></i>
But I cannot figure out how to add my svg file to the element in css. I looked at the bootstrap code and they just had this:
.bi-arrow-right-square-fill::before { content: "\f136"; }
Can someone explain an example on how to load an svg file into a <i> HTML tag?
Bootstrap is doing this via an icon font; the glyph in that font at codepoint \f136 in that font will be the icon instead of a normal letter glyph.
Creating or modifying icon fonts can be a bit fiddly; there are some web-based tools to make it a little simpler than working in a font editor, but in the long run I wouldn't recommend it. (They're a pain to maintain, since you have to regenerate and version the font every time you make a change, and cause significant problems for accessibility.)
Instead you could convert your SVG into a data:image URI and put that in your CSS, using whatever method is most convenient for your specific layout, for example
.foo::before {
content: url('data:image/svg+xml;utf8,<svg ... </svg>')
}
or
.foo {
background: url('data:image/svg+xml;utf8,<svg ... </svg>');
width: ..., height: ...
}
...or, of course, just host the SVG at a real URI and embed it using CSS as you would any other image.
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 have seen font-awesome icons have the class 'fa' for all icons like this:
<i class='fa fa-snapchat-ghost'></i>
Why not simply
<i class='fa-snapchat-ghost'></i>
? What does the class fa give you?
Its a matter of efficiency within the CSS file that jmoerdyk linked to...
adding an #extend .fa directive into each and every icon would:
a) run counter to what CSS is based on from a theoretical standpoint.
b) add way more lines of code than simply having a single class assign properties that every icon needs in order to render correctly.
It's no different than why Bootstrap (or any other framework) relies on multiple CSS tags; efficiency of code and avoiding redundancy. Consider:
All Font Awesome icons need to use the Font Awesome Font.
They must all have the same display as well as other CSS styles
applied
Without .fa every icon would need to repeat those styles, adding unnecessary bloat to code and increasing the possibility that discrepancies might occur as new icons are added.
The overall size of the CSS file (even minified) would be larger due to repetition, so there is that concern as well.
This is what .fa gives:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
So in addition to the icon you show, this style also gets applied.
Check the full source code
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 created simple web page page with icon fonts.
jsFiddle link
Similar as here
js trick
But I have other icon displayed... snake instead of bars:).
What is wrong with my fonts? Thanks for answers.
Code here:
[data-icon]:before {
font-family: icons; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}
<h4><span aria-hidden="true" data-icon="⇝"></span> Stats</h4>
x21dd; is the unicode that represents that "snake".
Source
Try to use FontAwesome icons (I included them in the CSS by using the #font-face).
All you need to do is to define a class in a tag like
<b class="fa fa-chart"></b>
And FontAwesome will automatically add the icon inside that tag.
Check this Fiddle.