I use Material Design Icons by Google in my app. At least two styles are needed at the moment: regular (filled) icons and the outlined ones. The problem is, these two styles do not align!
If you look at this output, the regular and outlined icons are positioned on different heights for no clear reason. By examining them in the inspector, you can see that the bounding boxes are indeed different (for the outlined icons they seem to be lower than needed).
.icon {
vertical-align: middle;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<i class="icon material-icons">person</i>
<i class="icon material-icons-outlined">person</i>
<i class="icon material-icons">home</i>
<i class="icon material-icons-outlined">home</i>
Is there a workaround which can be applied to .material-icons-outlined class once to ensure they are positioned properly everywhere?
margin-bottom: -1em works for basic cases, but the icons are used in lots of different contexts, and sometimes (e.g. when their parents need to shrink to their line-height) this solution fails.
Alternatively, is there a tool which can quickly fix the font and make its characters appear on the desired height?
UPDATE: This seems to be an issue only on my Windows 8.1. The icons are aligned on Windows 10. This is reproducible in any browser.
UPDATE(2): That said, there is clearly some difference between the two fonts. Outlined icons do not work (just display their names instead of icons) on older iOS versions, while the regular ones work perfectly.
You can use flex (or even grid) to center align them.
.icon-wrapper {
display: flex;
align-items: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<div class="icon-wrapper">
<i class="icon material-icons">person</i>
<i class="icon material-icons-outlined">person</i>
<i class="icon material-icons">home</i>
<i class="icon material-icons-outlined">home</i>
</div>
Related
So I want to make this circles with icons in it, and for the icons I want to use font awesome. For the circles I use a padding trick so the circles are always circles and not ellipses.
The icons get way too big and when removing box-sizing: border-box way too small.
I think the padding-top: 20%; is the cause of the problem but I don't know how to fix this.
svg{
width: 20% !important;
padding-top: 20%;
margin-right: 20%;
border-radius: 100%;
background-color: #ec567c;
float: left;
box-sizing: border-box;
}
svg:last-of-type{
margin-right: 0;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<i class="fas fa-female"></i>
<i class="fas fa-music"></i>
<i class="fas fa-camera"></i>
If you take away the box-sizing: border-box; the icons will in the circle, but they will be way to small .
Font Awesome is - as the name says - a font.
That means you can change the size with font-size.
If you think the icon is too big: lower the font size.
If you think the icon is too small: crank that font size up.
There is an attribute you can add to the icon to make it bigger smaller than it's default. At the time of writing the Fontawesome docs are down though so I can't get it right now... that's the best way to go about it in my opinion.
EDIT:
OK so it's data-fa-transform="shrink-6" for making smaller. I believe you can increase the size with data-fa-transform="shrink--6"
Hello
<span class="fa-layers fa-fw">
<i class="fas fa-circle" data-fa-transform="shrink--6"></i>
<i class="far fa-calendar-alt fa-inverse" data-fa-transform="shrink-6"></i>
</span>
World
https://jsfiddle.net/vk3qw09f/395/
Adding the following JS before you load the Fontawesome JS will wrap the svg in tags. I'd suggest you do this and style the i tags rather than the svg.
FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
According to the official documentation about power transforms you can simply add data-fa-transform="grow-6" to your icon element. It should work exactly the same as the hack using data-fa-transform="shrink--6".
Edit: not sure if it applies to SVG icons as well, looks like only to icon fonts. Using Angular 7.2.12 with #fortawesome/angular-fontawesome (0.3.0), #fortawesome/fontawesome-svg-core (1.2.17), #fortawesome/free-brands-svg-icons (5.8.1) and data-fa-transform="ANYTHING" doesn't work for me.
Solved this problem for my project using <fa-icon style="font-size: 2rem;" [icon]="['fab', 'facebook-f']"></fa-icon>.
I'm trying to remove the border radius of fa-bars and I can't.
That's my code:
<i class="fa fa-bars fa-2x"></i>
.fa-bars
{
border-radius: 0px !important;
}
Thanks!
As already mentioned in a comment, that's not possible, since that actually is how the icon looks and nothing like a border-radius. You could simply use it like how it looks, or as an alternative you may take a look into Material Icons. There's an icon looking exactly how you want it to look like.
See here.
Wnen I use buttons on my page the word spacing is too large by default.
.btn {
word-spacing: 1px;
}
is it correct to use negative word spacing? It seems to do the trick.
.btn {
word-spacing: -8px;
}
It's a little bit strange that it has this big spacing by default, but maybe it's just a matter of preference.
Twitter Bootstrap (bootstrap.css||bootstrap.min.css) does not set word-spacing on .btn elements.
Inspect the element and see what stylesheet is adding that rule, because I can assure you it is not the default bootstrap.css (as of v3.3.6). You are either using a modified (non-standard) Twitter Bootstrap version or you are loading a different theme/framework on top of it.
And yes, as long as you load your own stylesheet last or you are using a stronger selector than the one that's currently setting the rule, you can override the word-spacing property on .btns (whithout "breaking" anything else).
You are only changing the space between the letters of your buttons. As a sidenote, I recommend using word-spacing: 0;, which will render the font exactly as it has been designed, with proper kerning and ligatures.
Had the same Problem with glyphicons inside bootstrap buttons. My problem was that I did forget to close the glyphicon span. Afterwards it displayed as normal.
Wrong example:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-envelope">
Text with spaces
</button>
Working example:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-envelope"></span>
Text with spaces
</button>
I using Google Chrome Inspector and if you select the before pseudo of the glyphicon you will see that there is empty space at the right. How I can center the glyphicon?
I tried to set text align but it doesn't work.
<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>
jsFiddle
Updated link jsFiddle 2
I gave letter spacing for pseudo element and it did the trick. I tried changing the font-size and I see that white space is not appearing.
.glyphicon:before{
letter-spacing: -0.085em;
}
Working fiddle: http://jsfiddle.net/MasoomS/1z79r22y/
I believe the root problem here is with the SVGs that the icon font was built from. I've built icon fonts before from SVGs and saw this exact same behavior. If the symbol wasn't centered within its SVG viewbox, you'd get a glyph that was off-center like you've observed.
Developing a code-based solution would get super messy, because you'd have to individually account for each glyph that isn't centered, and then your offsets would have to be relative to the size of the icon so the offsets scale with the font-size of the icon. It's certainly do-able, but it seems like the sort of thing that would be a headache to maintain.
I would recommend one of the following:
Accept the glyphicon set for what it is (a free icon font) and live with its imperfections
Look for another icon font that doesn't have this same issue--be willing to pay for a license
Create your own icon font so you can ensure that all glyphs are centered
Almis Hi there. Your demo code is only using just the span holding the glyphicon it has no Width to center within.
As soon as you do something like this it will center.
<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>
Here is a Fiddle.
Just add the class my-style-icon to the icon and add this to your CSS:
.my-style-icon {
font-size: 120px;
display: block;
text-align:center;
}
vertical-align: middle; margin: 0 auto; should do the trick for you.
Hello Almis.
.glyphicon {
font-size: 120px;
display: block;
text-align: center;
}
Just replace the .glyphicon class with above css code.
Enjoy..
As you can see its clearly a problem by the author adding some white space, the only why to fix this is by setting the width manually.
You can get rid of the empty space on the right of the glyph by playing with the letter-spacing attribute:
.glyphicon {
font-size: 120px;
letter-spacing: -9px;
}
I normally use max-width (and width, if I want all icons in a list to have the same size) to deal with such issues.
As per your jsFiddle:
max-width:222px;
See here.
The reason this can't be fixed in any other way other than a hack is because the glyphicon itself isn't centered inside it's own container, meaning when it was designed in it's matrix it wasn't fully centered.
You will have to 'hack' it with shivs stated above (letter spacing, negative margin, etc) but it's resolution dependent.
However to VERTICALLY center it you can remove the padding, and use line-height equal to your container's height
Use font-awesome, it's '+' is perfectly centered, with no kerning problems. And use display:flex on parent, in combination with margin:auto on child (i.e. icon). It results in a perfectly alignment.
Here is the jsfiddle(http://jsfiddle.net/Rpad/sps01dsd/13/)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
HTML:
<div class="container">
<div class="row">
<div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
CSS:
.fa-plus {
margin: auto;
font-size: 10em;
}
#add {
border: 5px dashed black;
border-radius: 25px;
display: flex;
}
I'm building a website and I want to visually have a row of font awesome icons appear to have the same height. This also means I want them to all sit on the same baseline.
Due to the nature of the icons being different shapes with varying aspect ratios, when you place font awesome icons with the same font-size or fa-2x (etc) on the same line, their heights and baselines do not line up horizontally. In fact, I've noticed there doesn't seem to be much of a default for how the icons sit vertically in a row beside each other. Some sit above the baseline at random heights. Also at the same fa-size or font-size, the icons can visually appear to be dramatically different in size. For example the mobile-phone icon vs microphone.
The odd thing about the mobile-phone icon is how it floats above the baseline because it seems to have a built in padding that I can't seem to find a way to override. Using vertical-align:baseline etc does not help.
Here's the HTML:
<div class="some-class">
<i class="fa fa-microphone"></i><i class="fa fa-mobile-phone"></i>
<h3>TEXT</h3>
</div>
<div class="some-class">
<i class="fa fa-automobile"></i><i class="fa fa-cubes"></i>
<h3>DIFFERENT TEXT</h3>
</div>
The CSS:
.some-class {
float: left;
height: 160px;
padding: 15px;
text-align: center;
}
Anyone know of a proper way to align my font awesome icons with CSS so they appear visually to be exactly the same height when placed side by side?
Some of the glyphs size and centers are different by design from the majority (https://github.com/FortAwesome/Font-Awesome/issues/928) as you have found yourself. it might be worth to request reconsideration to the FA team.
I could align the icons in your layout though by using some css adjustments to compensate specifically for the "fa-mobile-phone". I added "fa-2x" to all icons and additionally the following css the the "fa-mobile-phone":
font-size: 42px;
top: 4px;
position: relative;
After that all the icons seem aligned vertically and all seem to have the same height. You might want to do similar adjustments in your layout.