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.
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
When I'm making web pages I like to use unicode characters for icons when images or SVGs really aren't necessary. It's easy for me and it makes the page lighter. This works pretty well, usually, except that I always end up having to fiddle with the offset to get it centered correctly.
Yes, yes, I know about this:
.someDiv {
width: 10px;
height: 10px;
line-height: 10px;
text-align: center;
}
But the catch is that most glyphs are not themselves vertically centered. This means that I end up, for example, with this vertically off-center ● in a square container with that CSS:
Is there a CSS way to center the glyph and not the font's mean line? (Or whatever is technically being centered.)
What you are experiencing from my perspective cannot be solved in a satisfactory way. The problem is that a) you are using characters which do have kerning, line-height etc and cannot reliably be centered vertically, not even on a per-character basis, because b) every OS and browser may have their own representations of that character which you cannot control.
I do like the approach nonetheless because being so light-weight, and I used it in the past, e.g. in my minesweeper game https://connexo.de/defuse
All icons you see there are UTF-8 emoji/characters.
I was able to achieve something that works reasonably well by ditching CSS and thinking a little more outside the box -
First I downloaded a Noto font with the symbols I want, since Noto fonts are very permissively licensed. https://www.google.com/get/noto/
Then I installed fontforge http://fontforge.github.io/
I added this Python script to my %appdata%/Roaming/fontforge/python/ directory (seeing as I'm on Windows) https://github.com/gumblex/stamico/blob/master/centerglyph.py
I opened the Noto TTF with fontforge. Using select-all then the Tools > Metrics > Center in Glyph option that the script adds, then some adjusting with Tools > Metrics > Y Offset I was able to vertically center all the glyphs in the font. (In my case, for some reason, choosing the Center in Glyph/Center in Height options resulted in glyphs that were positioned higher than the center line, so I had to further adjust them.)
I added a #font-face to my CSS and specified the font style for glyphs that I want to be vertically centered.
#font-face {
font-family: "symbol-font";
src: url(ux/NotoSansSymbols2-Aligned.ttf);
}
In my Web application I am using google font 'Lato'.Now Requirement is I should use 'Roboto' font for my web application.
I replace Lato font with Roboto but This reflect major change in terms of spacing in whole Web application.
Where I am doing mistake?
I cant share whole page screenshot.
Original with Lato
Disturb with Roboto
Every font-family have own letter spacing and line-height. Now you need yo set re-structure your letter spacing and line-height!
Definitely in specifiing sizes for elements. If you need to translate the site to other language, you meet the same problems. If you change some text you have the same problems. And so on.
Everyting depending on text should not have explicit sizes (width at least). So when you change te text or the font, element just enlarges or shrinks without negative effect in most cases.
The only exception is placing some set of elements inside of one raw or limiting their max-width. These can cause problems if more text appears or new font is wider. Anyway, it's not good if the whole site consists of such elements. And Roboto is not wider than Lato, so it's not your case.
Is it possible to view your webpage ?
You can also change the spacing between letters using the css property "letter-spacing"
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 5px;
}
<h1>SAMPLE</h1>
<h2>SAMPLE</h2>
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 :-)