I'm making a paging control for a grid, and using font awesome icons for prev, next buttons.
The issue is that the icon (and any text that is in that element) appear 1 or two pixels higher than text where the font icon classes are not defined. Other font libraries such as https://icomoon.io appear to have the same behavior.
In the image below, you can see how the image and it's text do not align well vertically with the page numbers. Setting vertical-align styles on the element or pseudo element do not seem to help as none of the vertical alignment settings gives aligns perfectly.
I've encountered the same problem and found the solution on another post and adding this to my css fixed it for me.
Don't forget to put the good associated icon (mine was fa-lock) and the good content value
.fa-lock:before {
content: "\f023"; /*This is what the creator of font-awesome put in to show the lines character */
display:block;
margin-top:-1px;
}
Related
Can someone explain the css behind font awesome's stack icon? I'm trying to create my own custom stack icon font, but I fail to get them to stack the way font-awesome manage to do it.
I'm not sure WHICH is the specific css that they manage to make the stack "happen".
(As far as I know, this is not a duplicate: There are a lot of questions about how to USE the font-awesome stack icons, but none behind the mechanism of it.)
The icons themselves are contained in the FontAwesome font. The magic is in the number of helper CSS classes that let you select an icon character and let you position these icons easily. Each class is reponsible for a piece of functionality, so together they give you a modular build-up of an icon.
Stacking
When stacking two icons with FontAwesome, you need an extra span with the class fa-stack. This span adds position: relative, which allows you to position the two stacked icons absolutely and by doing so, making them overlap.
The size is also set to 2em, because the background (or overlay) is twice the size compared to a normal icon. Givin it this exact width makes sure that enough space is claimed for the icons, but also that the smaller icon can be properly centered horizontally.
The icons inside the span get a class like fa-stack-1x or fa-stack-2x that dictates their size and position within the parent span.
So, summing up the most notable classes (for icons and stacking):
fa set the right font. This basically makes an icon out of an element.
fa-twitter, and many others let you select a character. This character is added in the CSS in the content of the ::before pseudo-element.
fa-stack defines a container to contain the stacked icons. Adds position: relative, so you can absolutely position icons in it.
fa-stack-2x makes the icon twice the size and positions it at 0,0 in the parent container. Used for background or overlay icons.
fa-stack-1x uses 100% of the width of the parent and centers the icon in it. Used for the smaller image icon that is used with the background/overlay icon.
Other features, like rotation, work in a similar way by just adding the right class.
I'll explain it to you with the CDN file provided by font-awesome:
http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
Let's take a look at this html:
The css that makes this piece of html render an icon is the following:
.fa {
font: normal normal normal 14px/1 FontAwesome;
}
This declaration tells to the class FA to use the font-awesome font.
Then, for any fa-whateverIconName you add, you'll have the following:
.fa-connectdevelop:before {
content: "\f20e"
}
So basically, when you use font-awesome's given classes, your html item gets the proper font and a before pseudo-element with your class's corresponding icon.
I am using Bootstrap to create my user interface.
I have a navbar that is relatively tall; the default height of the navbar is 50px and my navbar is 100px. When I render a split button, the menu drop-down doesn't respect the navbar height (the link below illustrates the problem). How do I fix this so that the dropdown renders beneath the button (and not beneath the navbar)?
Also, if anyone has a suggestion on how to get rid of the gap in the middle of the button group, that'd be awesome too!
Clarification
I'm using SASS so I didn't realize that the link that I pasted didn't illustrate the problem. I compiled my CSS and put it in the JSFiddle link. Unfortunately, the CSS file there is huge.
If you're using BootStrap with LESS or SASS, I adjusted the $navbar-height variable to 100px (instead of 50px).
In any case, I'm hoping for some guidance on what the Bootstrap Way™ of adjusting things like the navbar height so this stuff works.
(Old link that doesn't illustrate the problem)
http://www.bootply.com/yOrqxaoM2t
(New link)
http://jsfiddle.net/marvery/VpL9N/1/
ok it looks like the issue is not with the navba height its with the margin you have set margin-bottom:33px on .navbar-btn- that needs to be removed.
.navbar-btn {
margin-bottom:0px;/* should be zero bootstrap default btn margin- remove yours */
}
that is moving the dropdown to be 33px lower than the default
fiddle link
http://bit.ly/YqiQNQ
I have this food menu that looks great online. The menu is generated by a Wordpress plugin with customizable CSS. The rest of the site looks mint on the iPhone, but when you get to the menu it overlaps awfully and kind of disappears.
Open the link in the menu and make your window size really small - see how it overlaps at the smallest setting?
I was playing with #media on the widths and couldn't figure it out.
Can anyone help me make the text wrap around at the websites smallest width?
Or a plugin that will detect if the user is on mobile and display a different page entirely (just that page).
If you're having an issue with text not wrapping how you'd like it to wrap I'd suggest adding white-space: normal to the text's parent element to ensure that the text will wrap and not inherit a white-space: nowrap declaration intended for another element.
For your specific circumstance, the following CSS will force the menu to wrap appropriately:
.rmc-menu-wrap {
white-space:normal;
}
I know how to display an icon as such:
<span class='icon-remove'></span>
But If I add padding to the span, extra icon shows up. How to fix it?
span {
padding-right:60px;
}
fiddle
The glyphs are presented using one large image map (or so called CSS sprites), so if you leave enough space on in either side of the element it will show other glyphs as well. Two solutions comes to mind:
1) Put the icon in a containing element:
<span><i class='icon-remove'></i></span>
2) Or use margin:
span { margin-right: 60px }
I figure you just want to have some whitespace to the right of the icon? Have you tried margin:
<span class='icon-remove' style='margin-right:60px'></span>
The reason extra padding displays more icons is that Bootstrap uses CSS sprites to display icons. What you're actually seeing is a background image, more specifically a section of a large background image that includes many available icons. The definition of the class "icon-remove" specifies the background-position property to select the particular icon. If you add padding, you will reveal more of the background image, which will show additional icons.
The solution, then, is to either add margin, as Rid Iculous suggested, or couch your within another element and add padding to that. I'd go with the margin.
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.