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.
Related
I have created a site which looks great in Chrome but in Safari the button's background color looks bleached (silver background with white text). I saw someone say that it's because I am overwriting the bootstrap style. Why would that cause this issue? People have also suggested to avoid the "!important" qualifier. Does that make sense on its face?
The one on the left is how it should look. The right one is what Safari displays.
<a type="button" class="btn-secondary" target="_blank" style="padding: 0.25rem 0.25rem; border-radius: 5px; margin-right: 0.35rem; background-color: #F2A649">
<i class="fas fa-chart-bar"></i>Metrics
</a>
The simple reason was that I accidentally added the type of button to the anchor tag. It seems that Chrome is smart enough to ignore that attribute while Safari does not.
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>
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>.
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 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.