Looking through the examples on the fontawesome website, I notice a few make use of the class fa-fw. For example:
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
I have tried with and without it and I cannot see any notable difference.
What is the purpose of the fa-fw class?
Fixed Width Icons
I've opened the sample page in Chrome, opened inspector on the "Library"-Element of the fw-sample and removed the fw-class. This messes up the icon-alignment - and that is also mentioned as the purpose of fw: ensuring proper alignment of the icons :-)
Icon size, some icons are bigger, if you use fa fa-fw, the size of the icon will be the same regardless of how big/small it should be.
fa-fw class will align icons vertically center with fixed margin. so the size of each icon will not vary and they aligned below each other in the center.
Related
I am working on one of the bootstrap challenges, and I guess I am in the last part that I could complete the landing page; however, I got some minor issue regarding the container in div and the footer issue.
I am trying to set up the container with a limited dimension with height and weight. I want to know should I add up any CSS to target the container?
Second, I need to create some social icon with round and radius, and I have input "btn btn-dark btn-floating with the code by fab fa-twitter. However, it shows only a little peanut of the small square in the front.
Please kindly advise the way to input, or am I missing something that is not enough.
I believe this is necessary for me to add padding to let the footer fit all contents in the middle of the site.
Please do give me some advice about how could I fix all this issue.
The screenshot is what I need to complete
Thank you
This is what I done till now
I guess this will help your second issue check out the link
Social icon button round
I'm using this for my top bar text
<i class="fa fa-envelope" style="margin: 0 4px"></i>info#email.com
but in responsive design the envelope icon gets split from the mail text. I am trying to stick them together with no luck.
I have tried this but nothing
SÂ Overflow
you are looking for white-space: nowrap;
try adding the parent container of the icon and text that CSS class.
W3S link for more information
I think I must be missing something simple here. Is it possible to align the glyph content / glyph itself to the bottom of a parent element?
Given this example, how can I keep all the icons to the bottom, no matter the icon?
Here's an image to better illustrate what I want:
Obviously I can have a different line-height property per icon, but I'm wondering if there's a more generic approach to this issue. Or if font-awesome ships with some helper classes similar to the fixed width approach (by using fa-fw).
I did some digging around in Font Awesome and it didn't look like there were any solutions to a fixed glyph height. What I would do is add the following CSS and position each glyph out manually.
Happy coding!
.icon-elem {
position: relative;
}
.fa-user {
top: 7px;
}
.fa-cloud-upload {
top: 15px;
}
Just had to figure this out so adding a very late answer. In Fontawesome 5 icon height is more standard, but if you want to move icons around within their box you can use power-transforms.
Example:
<i class="fas fa-upload" data-fa-transform="down-4"></i> would move the upload icon closer to the bottom.
I created a custom vector font and trying to use it in some places that font awesome doesnt fit. However the font icons dont display property like the font awesome ones do. The CSS seems to be exact but I cant tell what is causing the issue. Below you will see the custom icon circled, while the others are font awesome. The icon just wont center like the font awesome icons.
You can find this markup on this page: Vegas Finals
The HTML <i> looks centered, but the :before pushes the actual icon up.
<i class="icon-ncaa icon-ebt-ncaa"></i>
The main thing is that your glyphs are not centered correctly inside the custom font.
You need to edit the .woff file (and other types if they exhibit the same problem)
You also should remove the btn-ncaa class from the container a tag as it alters the vertical-align and the whole button is misplaced as well in relation to the ones next to it..
I'm working on a html only webpage, and I am having some issues correctly formatting my social-media links. I have a fixed position div that is 48 x 190, and within it I'd like to put 4 different social media icons which link to their respective pages. I was able to set up the div correctly in css styling, and I was able to insert the images into the correct position just fine. However, as soon as I added the link tag to the image, it all broke. The formatting of the image seemed to change just by adding the link to it, and they now took up all this extra space around themselves, went outside the borders of the div, and refused to be properly centered. Why is adding a link to the image breaking the formatting in such a strange way, and how can I fix it so it remains formatted how I want even after the link is added?
Thanks!
have you set the border of your images to 0 ? When inside a link, browsers put a 1px border to images if this value is not set in the CSS.
If that is not the problem, posting your code (see jsFiddle for example) could help
I guess, the issue is related to the different size (in pixels) of icons, that cause to increase div and distrub the UI. I have also used Image-Links as following and it works fine. First ensure your icon size.
<a href="javascript: showPopup();" id="groupEdit" class="link">
<img src="/images/redPencil.png" title="Update">
</a>