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.
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.
This question already has answers here:
Font Awesome 5 unicode
(3 answers)
Closed 2 years ago.
I am using the CSS content attribute because it loads faster than the tags.
The "fa-user" icon class has two sets of icons, i.e. "far" and "fas" but, they share the same Unicode "\f007". This is a problem.
The result that is obtained has just one drawback. The icons load a couple of seconds after the page does. Hence, it messes with the UX.
Using the tag adds up to commented HTML markup.
So, is there a way I can still use CSS content attributes and switch between the "far" and "fas" classes?
Any suggestions to solve this?
The difference between the fas and the far of an icon is the font-weight so to switch between both you simply need to adjust the font-weight:
.icon {
font-family:"Font Awesome\ 5 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.icon:before {
content:"\f007";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<span class="icon" style="font-weight:300"></span>
<span class="icon" style="font-weight:900"></span>
Here is another related question: Font Awesome shows square instead of icon when used directly in CSS
Font Awesome 5 has asynchronous loading indicators that allow you to add css to the icon containers while they load so you can make sure that they do not shift your layout.
There is no need to use the css solution for this. And either way, the css also has to load external resources so this could take a while as well.
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
I'm trying to use my owns icons instead of images on my site but when I load icons from Fontastic or Iconmoon it doesn't work neither in chrome or safari, do I need a bootstrap or there is a mistake in my code?
This is the CSS from Fontastic
#font-face {
font-family: "untitled-font-1";
src:url("untitled-font-1.eot");
src:url("untitled-font-1.eot?#iefix") format("embedded-opentype"),
url("untitled-font-1.woff") format("woff"),
url("untitled-font-1.ttf") format("truetype"),
url("untitled-font-1.svg#untitled-font-1") format("svg");
font-weight: normal;
font-style: normal;
}
and how i tried to call the icon
<i class="icon-closeicon"></i>
When adding a custom icon font (such as something from icomoon) you have to do a few things.
Import the font with #font-face
Make sure you are importing the necessary css rules (ex. .icon-location:before {content: "\e947";})
Make sure your elements have the proper font-family value (the icon font you just loaded)
Make sure your elements have the correct .class name (the name of the icon you wish to call)
I have a suspicion that you are missing one of these steps (especially considering you didn't link the code in your question).
Here is an example fiddle of how a complete import of an icon font should look.
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 :-)