Center glyphicon content - css

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;
}

Related

Font awesome <svg> size

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>.

css Float left and Float right issue

I am trying to split a div into two event columns. The first div should be aligned left and the second div should be aligned right.
My solution is basically the following...
<div style="width:100%;>
<div style="width:50%; float:left;">
</div>
<div style="width:50%; float:right;">
</div>
</div>
My second column (my button panel) is going on a new line. I'm fairly new to css so help with a quick explanation would be appreciated.
https://jsfiddle.net/ff2yo9n3/
thanks
Since you are new to CSS, why not learn a modern layout technique with a broad range of options (flexbox), as opposed to an older method which has limited capacity and was never intended for building layouts (floats)?
With CSS3 Flexible Boxes (flexbox) you can build your layout quickly, simply and efficiently.
Here's all you need:
HTML (removed inline styles)
<div class="header">
<div>Buttons</div>
<div>
<a data-code="button" title="Show Source" class="top-button">
<i class="fa fa-code"></i>
</a>
</div>
</div>
CSS (added two lines of code)
.box .header {
font-weight:300;
border-bottom: 1px solid #ccc;
font-size: 15px;
margin-bottom: 10px;
padding: 5px 10px;
line-height: normal;
/* new */
display: flex;
justify-content: space-between;
}
DEMO
Flexbox benefits:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex items
it's responsive
it's the future of CSS layouts
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
If you want to split the div into two 50% width elements, you can't go the way you did there.
Both has to have the same floating element or else they will be overlapping with each other. This is a broad topic that is explained in MDN, referred as Block Formatting Context.
What you may want to do instead, make both divs to float: left; and width: 50%; then set the text-align: right; for the right aligned div.

Align icons and images to right, textarea to left (twitter-Bootstrap)

TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}

How do I align text to the middle of an element with CSS in Twitter Bootstrap?

I am using Bootstrap alerts and this is my success alert message:
<div class="alert alert-success" id="UploadSuccess">
<a class="close" data-dismiss="alert">×</a>
<strong>Congrats!</strong> You have successfully did it!.
</div>
And the result is:
As you'll can see that the text alignment is at the top of the <div>. So, how would II align it to the middle?
I have tried using padding-top and vertical-align:middle but neither works (I end up with the same result).
What do I need to do to change the vertical alignment of the text?
Make the line-height of the div the same as the height of the div, eg:
#UploadSuccess { height: 20px; line-height: 20px; }
This will only work if you have one line of text.
Trying to vertically center text text is a common issue. Normally this wouldn't work on normal boxes, but you can force it to work with vertical align:
vertical-align: middle;
display: table-cell;
However this will not work in IE7 and lower.
If you are sure the text you want to display you could use line-height to fake the effect like this:
height: 40px;
line-height: 40px; /* same as height */
This way works cross browser and has support up to IE5.5 I believe. If this is not an option I'm afraid you're out of luck (it can't be done).
As a side note that error message suffers from bad grammar, it should be "Congratulations! You have successfully done it.".
Make it easier ;) ! Try to use alert-block ! That works fine with latest Bootstrap version !
<div class="alert alert-block alert-success" id="UploadSuccess">
<a class="close" data-dismiss="alert">×</a>
<strong>Congrats!</strong> You have successfully did it!.
</div>

Specifying exact percentage widths in relation to parent DIV in CSS

I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.

Resources