i add icon(Bootstrap Glyphicons) in h1 but icon not in text baseline. how to fix This?!
Problem pic
Code:
<h1 ><a><i class="icon-play"></i>TEST TEXT</a></h1>
For Bootstrap version 3 use this.
<h1>Hi this is heading<span class="glyphicon glyphicon-star"></span> Star</h1>
See this jsfiddle.
your icon size will change according to size of its parent.
Im using Bootstrap v3.2 and I had the same problem.
<h3><span class="glyphicon glyphicon-user"></span> User</h3>
so I changed the display property of the glyphicon from inline-block to inline.
.glyphicon
{position: relative;
top: 1px;
display: inline;
...
}
This is due the An inline element has no line break before or after it, and it tolerates HTML elements next to it but an inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
I would try:
1) changing padding of i.icon-play
2) background-position of i.icon-play
3) vertical-align:center; line-height:12px; of i.icon-play
One of those will work, good luck ;-)
Related
I am trying to align the first two divs inside "product-details" class. I removed the last div with clear:both; I gave 150px width to the first div with class "text-center".I gave display:inline-block and position:relative to both of the first divs. I made width of the second div auto.
When I check the computed values in the inspect element the first div is not accepting the display:inline-block. It shows display:block; and the two divs are not aligned horizontally. I have had this situation before also.
div.text-center {
display: inline-block;
position: relative;
}
div:nth-child(2) {
display: inline-block;
position: relative;
}
<div class="product-details">
<div class="text-center">...</div>
<div>...</div>
<div style="clear:both;"></div>
</div>
div.text-center is not taking display inline-block instead shows display block in the element inspector
The code does work. I right clicked on the second ... and clicked inspect element. You can see in the "Elements" tab then in the "Styles" tab that the default display: block was overridden by display: inline-block. What browser are you using? This is on the latest version of Chrome that I am getting this result.
As pointed out above, the code should work. You can try and force it to work by adding an important rule
div.text-center {display: inline-block !important;}
I removed floats and display changes from block to inline-block as required. That was the only option. Also I need to remove width auto and give width in % for both divs to align them horizontally. This was the solution I found. Thanks for your answers.
I have a little Bootstrap/Font-Awesome alert that looks like this:
The HTML for it looks like this (I inlined the custom CSS just to ask my question):
<div class="alert alert-success" role="alert">
<i class="fa fa-check" style="float: left; margin-right: 10px;"></i>
<p style="overflow: hidden;">{{ $discount }}</p>
</div>
This is the exact look that I want, with the checkmark in its own "column" so that the text does not wrap underneath.
This HTML/CSS works totally fine as is, but just to be curious, I tried to accomplish the same layout by changing the <i> tag CSS from float: left to display: inline-block. However, this caused the whole block of text to wrap underneath the checkmark. Is there another way to accomplish the layout in my screenshot without using floats?
Edit:
I just tried giving both the <p> and <i> tags display: inline-block, but that didn't work. It caused the <p> text to wrap underneath the <i> icon.
I put together a jsfiddle right here to play with it: https://jsfiddle.net/9c7ym3sk
You can do using display:table and display:table-cell. like following:
.alert{
display: table;
}
.fa{
display: table-cell;
vertical-align:top;
}
p{
display: table-cell;
padding-left:5px;
}
Fiddle
By default <i> is an inline element while <p> is a block level element which takes full width of the browser window. If you set <i> as inline-block then subsequent block level element i.e <p> will drop in next row so you need to set inline-block property on p too.
In another way you can use float: left on <i> and overflow: hidden on <p>. It will also work fine...
Add some max-width to <p> and vertical-align: top; to both elements like this.
http://prntscr.com/a6ten4
When content inside <p> becomes too much then it causes <p> to drop below.
So apply max-width to prevent this...
I using Google Chrome Inspector and if you select the before pseudo of the glyphicon you will see that there is empty space at the right. How I can center the glyphicon?
I tried to set text align but it doesn't work.
<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>
jsFiddle
Updated link jsFiddle 2
I gave letter spacing for pseudo element and it did the trick. I tried changing the font-size and I see that white space is not appearing.
.glyphicon:before{
letter-spacing: -0.085em;
}
Working fiddle: http://jsfiddle.net/MasoomS/1z79r22y/
I believe the root problem here is with the SVGs that the icon font was built from. I've built icon fonts before from SVGs and saw this exact same behavior. If the symbol wasn't centered within its SVG viewbox, you'd get a glyph that was off-center like you've observed.
Developing a code-based solution would get super messy, because you'd have to individually account for each glyph that isn't centered, and then your offsets would have to be relative to the size of the icon so the offsets scale with the font-size of the icon. It's certainly do-able, but it seems like the sort of thing that would be a headache to maintain.
I would recommend one of the following:
Accept the glyphicon set for what it is (a free icon font) and live with its imperfections
Look for another icon font that doesn't have this same issue--be willing to pay for a license
Create your own icon font so you can ensure that all glyphs are centered
Almis Hi there. Your demo code is only using just the span holding the glyphicon it has no Width to center within.
As soon as you do something like this it will center.
<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>
Here is a Fiddle.
Just add the class my-style-icon to the icon and add this to your CSS:
.my-style-icon {
font-size: 120px;
display: block;
text-align:center;
}
vertical-align: middle; margin: 0 auto; should do the trick for you.
Hello Almis.
.glyphicon {
font-size: 120px;
display: block;
text-align: center;
}
Just replace the .glyphicon class with above css code.
Enjoy..
As you can see its clearly a problem by the author adding some white space, the only why to fix this is by setting the width manually.
You can get rid of the empty space on the right of the glyph by playing with the letter-spacing attribute:
.glyphicon {
font-size: 120px;
letter-spacing: -9px;
}
I normally use max-width (and width, if I want all icons in a list to have the same size) to deal with such issues.
As per your jsFiddle:
max-width:222px;
See here.
The reason this can't be fixed in any other way other than a hack is because the glyphicon itself isn't centered inside it's own container, meaning when it was designed in it's matrix it wasn't fully centered.
You will have to 'hack' it with shivs stated above (letter spacing, negative margin, etc) but it's resolution dependent.
However to VERTICALLY center it you can remove the padding, and use line-height equal to your container's height
Use font-awesome, it's '+' is perfectly centered, with no kerning problems. And use display:flex on parent, in combination with margin:auto on child (i.e. icon). It results in a perfectly alignment.
Here is the jsfiddle(http://jsfiddle.net/Rpad/sps01dsd/13/)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
HTML:
<div class="container">
<div class="row">
<div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
CSS:
.fa-plus {
margin: auto;
font-size: 10em;
}
#add {
border: 5px dashed black;
border-radius: 25px;
display: flex;
}
A straight forward question.. is it possible to set the width in percentage for a span tag in CSS? for example:
<span style="width: 50%">...</span>
etc..
In my project I'm currently using divs but ofcourse after each div tag a line break gets inserted (which I don't want). So the most obvious solution to that is then to use span tags instead of div. But then I'm not able to define the width for the span tags.. Atleast not in a percentage kind of way.
Thanks in advance for any help!
Define the element as an inline block and you can control the width and height like a block element while keeping it inline with surrounding content.
#element {
display: inline-block;
width: 50%;
}
inline elements cannot have dimensions. do them to do so, and still remain inline, add:
display: inline-block
Add display: flex; on parent div style.
<div style="display: flex;">
<span style="width:50%">...</span>
<span style="width:50%">...</span>
</div>
I'd like to use the inline labels of the bootstrap css framework:
<span class="label">Default</span>
Unfortunately these labels are not vertically centered when used together with other elements.
<p>
<span class="label">test</span>This is a test heading.
</p>
Please see the full code for a visual example: http://jsfiddle.net/kvPpm/
I am aware of the line-height and absolute/relative positioning workarounds but was not able to apply them correctly.
How can I vertically center these labels?
Since <span> is an inline element by default you can just do:
span { vertical-align: middle|top|bottom; }
And it should work. http://jsfiddle.net/kvPpm/1/
But then <a> inside <span> is not semantically correct. You can just use <a> and style it display: inline.
http://jsfiddle.net/kvPpm/3/
.label { vertical-align: top; }
This worked for me when I wanted it to be aligned properly in a ul