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
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'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 have this pure-CSS (display) solution for a follow button:
<span class="follow-status following">
<a href="#" class="btn btn-follow" data-user-id="123">
<span class="following-text"><i class="icon-ok"></i> Following</span>
<span class="follow-text"><i class="icon-plus"></i> Follow</span>
<span class="unfollow-text"><i class="icon-remove"></i> Unfollow</span>
</a>
</span>
I'd like to, for example, change the text on hover depending on what shows up. However the a element has the padding, and stylizing the span looks really awkward.
- Should I overwrite the A padding and shift it into the span?
- Should I write the HTML differently?
- Should I just toggle applicable text/style by JS?
- Something else?
you can see the outer span has the class "following"
.follow-status span { display:none }
.following .following-text { display: block}
.following:hover .following-text { display: none}
.following:hover .unfollow-text { display: block}
how would you accompliush that within the twitter bootstrap confines?
Personally, I would remove all padding/margins from the spans inside the anchor and apply your CSS padding/margins etc to the anchor element. That way you future proof yourself incase you want to add different elements inside the anchor element.
How does one semantically marks up a navigation bar of icons + text, where text is below icons and icons are a sprite.
With two more conditions: navigation boxes are of different width and icon should serve as a link as well (be clickable)
Concrete example is # www.emex.ru.
In other words: how does one convert
<ul>
<li>
<a><img width=32 height=32/><br/>Link1</a>
</li>
<li>
<a><img width=32 height=32/><br/>Link2</a>
</li>
</ul>
to a version without <img> elements
An unordered list is common for navigation menus. You can style the ul and li tags to space and align each link however you need. You should be setting a class or ID on the li tags and setting the background image position. A nice example is here
http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/
Twitter bootstrap uses the <i> tag for doing this. See their examples.
So something like this:
<li>
<a>
<i class="icon-shoe"></i>
Shoe
</a>
<a>
<i class="icon-balloon"></i>
Balloon
</a>
</li>
And then in your CSS:
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
}
.icon-shoe {
background-image: url("path/to/shoe/icon.png") no-repeat;
}
.icon-balloon {
background-image: url("path/to/balloon/icon.png") no-repeat;
}
becuase you'll be using images for your navigation its important that you add the alt="" tag in so google can see your links anchor text.
I have a span like this
<span class="ui-icon ui-icon-circle-close"></span>
which gives display a close icon of color same as the theme color.
But want to use the red icons which are available for the error.
Which jquery class should I use for that.
I found a class in Jquery css
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon
{background-image: url(images/ui-icons_cd0a0a_256x240.png); }
this image is the image which contains jquery red icons .
But I cant use it.
The span's class only determines the icon.
Set the "ui-state-error" on its parent to change the icon's color to red.
Check the icon example here: http://jqueryui.com/themeroller/ (the bottom of the right sidebar).
When trying to use such icons before text, I got line break problems and a bad alignment between the icon and the text.
To avoid the icon to add a line break, use
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
To get a better alignment for the text, use the following
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
<span style="display: inline-block; overflow: hidden;">Your text</span>
If You want just icon with other color, not whole box as is the example here:
http://jqueryui.com/themeroller/, in bottom right conner
add this to anywhere in Your .css file:
.ui-icon-red { width: 16px; height: 16px; background-image: url(images/ui-icons_red_256x240.png); }
The name and path of the file are depend of the color what You wanted.
And in html:
<div class="ui-icon-red ui-icon-circle-zoomin">
<span class="ui-icon ui-icon-alert"></span>
should do it.
Edited because I think I now found the right class.
Apply ui-state-error to the layer containing the icon(s) and remove the default background and border:
CSS:
.error-state-icon.ui-state-error {
border:none;
background:none;
}
HTML:
<div class="ui-state-error error-state-icon">
<span class='ui-icon ui-icon-info'></span>
</div>
Demo >>