I am trying to create a few icons using fa-fw and fa-border, to get them to have the same width and with a border. I have tried using fa-stack, but that is no longer an option.
When using only fa-border the icon inside is placed in the center of the border, but using fa-fw will make the icon align to the right inside of the border, at least on some icons, like this one
<i class="fa fa-quote-left fa-fw fa-3x fa-border"></i>
Simple plunkr to demonstrate
How can I get the icon to be in the center of the border, using both fa-fw and fa-border
If you look at the css, the fa-fw class gives the <i/> element a fixed-width of around 1.3em. But the fa-3x class sets the font-size to 3em. That's why it looks like the icon is pushed to the right side, but in fact the container is too small for the icon.
Basically what you need is your own custom fa-fw-3x class. Something like this:
.fa-fw-3x { width: 3.3em; }
Fiddle around with the width to find out what you need.
Related
I am running into an issue when I try to align my checkmarks in the cells of my AG Grid. By default they are all left aligned but i would like them to be center aligned. I dont have a problem setting the alignment for text but for those material icons i have no luck.
Part of the problem seems to be also that span that holds the image might have the alignment set to center but that does not effect the column itself
Here is what the code for the cell looks like
<span class="ag-cell-value" role="presentation" id="cell-112"><span>
<span class="table-row-icon" style="align-items: center;">
<i class="material-icons md-18" style="color: #ff6358;
align-items:center;text-align:center;">done</i>
</span></span></span>
The problem actually was that I need it to make display Flex. Applying the below style created the desired result.
{display: flex; justify-content center}
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>
I'm using font awesome to create icons on my site.
The issue is that, some icons are taller than the actual icon content of the icon, so they don't line up on the baseline because of that extra height.
I want the icons to all be bottom aligned, on the baseline. Just like how letters are bottom aligned. For this to work, the icons must be only as tall as the content.
It is the actual :before inside of the .fa div that is taller than it should be. Here is an imagine which demonstrates 3 different .fa icons. One of them is taller than it should be.
I highlighted it's content box with blue before clipping it from Chrome.
You will notice how the bottom of the icon has extra space from some reason. That is the actual :before highlighted.
IMAGE EXAMPLE
How can I get rid of this space, so that the icons sit nicely baselined?
Please see this codepen example: https://codepen.io/vtsells/pen/oeJKNz
Essentially what I have done is wrapped the problem icon in a parent container so that I can then control what the height is supposed to be. Since I can control the height of the icon this way, I can control where the bounding-boxes are in terms of alignment. The alignment is done via flex-box in this example. display:flex; align-items:flex-end //flex-start to align to the top, center to align to the vertical center
Html:
<div id="container">
<i class="fa fa-trash-o fa-2x"></i>
<i class="fa fa-clock-o fa-2x"></i>
<div id="wrapper">
<i class="fa fa-check-square-o fa-2x"></i>
</div>
</div>
CSS:
#container{
background:#888;
display:flex;
align-items:flex-end;
padding:10px;
}
#wrapper{
background:#ccc;
overflow:hidden;
height:29px;
width:30px;
}
i{
background:#ccc;
}
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.
I have a side menu using Materialize CSS. It has three menu items in it, each with an icon. My problem is the icon sits too high - the base of the icon is in line with the base of the text. I want it to be so the icon is in the middle of the text vertically. Here is how my lis look:
<li class="logout-btn"><i class="material-icons">power_settings_new</i> Logout</li>
And here is what it looks like in the sidebar nav:
If anyone knows a fix that would be great!
Try with vertical align
i.material-icons {
vertical-align: middle;
}
If this doesn't work, try to wrap into a span the text
<i class="material-icons">power_settings_new</i> <span>Logout</span>
And then in the CSS
i.material-icons , i.material-icons + span {
vertical-align: middle;
}
change from:
<i class="material-icons">
to:
<i class="material-icons left">
more info can be found here: https://materializecss.com/buttons.html