CSS rounded corners not working on all icons - html

Can someone please tell me why the border-radius:50% property doesn't work on all icons?
I have to write different padding settings for each, but i want to do all the same.
.social a {
font-family: "FontAwesome";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
line-height: 0;
width: 20px;
position: relative;
text-align: center;
color: white;
top: 62px;
left: 25%;
font-size: 22px;
padding: 20px;
cursor: pointer;
background-color: #2f5183;
border-radius: 50% !important;
transition: 0.3s;
text-decoration: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-google"></i>
<i class="fa fa-twitter"></i>
</div>
Demo:
https://jsfiddle.net/hqwg00qf/5/

It works, corners are rounded.
Problem is in setting width for inline a elements, which doesn't work (you can't set width/height to inline elements). Add display: inline-block to links.
.social a {display: inline-block; ...}
https://jsfiddle.net/hqwg00qf/19/

Set display: inline-block css property to selector .social a
https://jsfiddle.net/hqwg00qf/31/

just add css display:inline-block to your icons
.social a {
display:inline-block;
font-family: "FontAwesome";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
line-height: 0;
width: 20px;
position: relative;
text-align: center;
color: white;
top: 62px;
left: 25%;
font-size: 22px;
padding: 20px;
cursor: pointer;
background-color: #2f5183;
border-radius: 50% !important;
transition: 0.3s;
text-decoration: none;
}
https://jsfiddle.net/hqwg00qf/40/

<a></a> tag default display type is 'inline';
So,Just add
.social a {
display:inline-block;
}
I think it solve you problem.
Thank you.

Related

How to vertically align an icon inside a span

I have a span like this:
<span class="indicator"></span>
Inside this span sometimes I have numbers like this:
<span class="indicator">
<span>10</span>
</span>
And, sometimes some Kendo-UI icons, like this:
<span class="indicator">
<span class="k-font-icon k-i-checkmark"></span>
</span>
And, here is my css:
span.indicator {
position: relative;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: 0.85em;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
.k-font-icon {
font-family: KendoUIGlyphs;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
font-size: 1.3em;
line-height: 1;
opacity: 1;
text-indent: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: none;
font-size: 16px;
}
There are two problems:
I want the two span indicators to have the same heights. The height of
the one with icon is one pixel more than the other one.
The icon in the span with icon is not vertically aligned.
UPDATE:
I realized if I change the font-size of .k-font-icon to 1em, both issues will be resolved, but the icon will be too small.
UPDATE 2:
Here's a Kendo UI Dojo.
.k-font-icon {
vertical-align: middle;
}
Simplest way, hope this help.
if you're setting the height and with of your .indicator, there are a few ways you could do this, but the easiest is probably to change the display to flex instead of inline-box and add a couple of properties (I haven't added the vendor prefixes, mostly because I'm lazy…):
.indicator {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: .85em;
font-weight: 400;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
height: 20px;
border-radius: 4px;
}
Unrelated side note: unless you have an .indicator class that behaves different ways depending on what HTML element it's on (and if that's the case, you should probably refactor that) you shouldn't add a span at the beginning of you CSS rule. It increases the specificity for no reason and makes your CSS less flexible/future proof.
Try using line-height and vertical-align css:
span.indicator {
position: relative;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: .85em;
font-weight: 400;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
height: 20px;
line-height: 20px;
vertical-align: middle;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
span.indicator .k-font-icon {
line-height: 20px !important;
}
DEMO
Updated
what about this?
span.indicator {
background: #8a8a8a;
color: #ffffff;
font-size: 1.35em;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
.k-font-icon {
font-family: KendoUIGlyphs;
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Why is padding not applying equally on two elements?

I want to apply the same class to two different elements and am noticing that the padding surrounding each element (or at least their heights) is different.
Here is the fiddle -- https://jsfiddle.net/v9vnru0j/1/ . How do I make both elements the same height (which I interpret to be having the padding apply equally to both)?
.btn {
font-family: "Montserrat", "HelveticaNeue", "Helvetica Neue", sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 20px;
font-size: 0.8125em;
text-rendering: optimizeLegibility;
max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
text-indent: 0rem;
}
<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>
That's because both links and inputs are inline by default.
However, inputs are replaced elements, and that makes them behave closer to inline-blocks.
Therefore, the solution is
.btn {
display: inline-block;
}
.btn {
display: inline-block;
font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 20px;
font-size: 0.8125em;
text-rendering: optimizeLegibility;
max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
text-indent: 0rem;
}
.buttonContainer *:hover {
margin: 0 0 0px 0;
text-rendering: optimizeLegibility;
cursor: pointer;
background-color: silver;
}
<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>
But on Firefox there is still a 2px difference. It might be that the value of the input is placed inside an inner wrapper. You can specify a height to fix this.
.btn {
display: inline-block;
height: 1.42em; /* Same as line-height */
box-sizing: content-box;
}
.btn {
display: inline-block;
height: 1.42em;
box-sizing: content-box;
font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 20px;
font-size: 0.8125em;
text-rendering: optimizeLegibility;
max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
text-indent: 0rem;
}
.buttonContainer *:hover {
margin: 0 0 0px 0;
text-rendering: optimizeLegibility;
cursor: pointer;
background-color: silver;
}
<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>
All of the styling that you have in your two buttons is at btn. However in one of your buttons your btn is being addressed inside an href tag and is not being hit.
I would go on your html
<span class="btn"><a data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="btn"><input type="submit" name="commit" value="Save" method="put"></span>
If you happen to need that other class, then just set it as
<span class="buttonContainer btn">
That should do the trick.
You need to change line-height to 1.

Span positioning on different browsers

I have next html element:
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>
With these styles:
.ember-power-select-multiple-option {
padding-left: 2px;
padding-right: 5px;
margin: 2px;
font-size: 13px;
font-family: CenturyGothic;
height: 21px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
color: #fff!important;
line-height: 19px;
background-color: #FFB000;
padding: 0 4px;
display: inline-block;
float: left;
}
.ember-power-select-multiple-remove-btn {
width: 15px;
height: 15px;
display: inline-block;
line-height: 13px;
padding: 0;
text-align: center;
vertical-align: text-bottom;
color: #fff;
opacity: 1!important;
font-size: 15px;
font-family: sans-serif;
}
I'm trying to achieve next: span with text and another span in it with "X" symbol. All it must be vertical aligned to middle. Now I have this at MacOS X Chrome (and it looks OK to me) and at Windows7 Chrome. How can I make they looks the same? And I sure exists a better way to centering span than I used.
UPDATE:
In addition, I cannot change html because it is a part of an addon.
You had repeated properties such as padding which will override the first one in the same class. Plus using bothinline-block and float:left will not do the effect desired on float so just use inline-block.
I've a made a few tweaks to your code:
Snippet
body {
box-sizing: border-box;
}
.ember-power-select-multiple-option {
margin:2px;
font-size: 13px;
font-family: CenturyGothic;
height: 21px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
color: #fff;
line-height: 17px;
background-color: #FFB000;
padding: 0 4px;
display: inline-block;
}
.ember-power-select-multiple-remove-btn {
width: 15px;
height: 15px;
display: inline-block;
line-height: 17px;
padding: 0;
vertical-align: middle;
color: #fff;
font-size: 15px;
font-family: sans-serif;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>
Your symbol 'x' is vertically aligned, but is docked to top of symbols line. It's such a symbol.
Try to use ×
This simbol with this style work for me
.ember-power-select-multiple-remove-btn {
vertical-align: middle;
}
Threre is a question about which symbol to use
Which font for CSS "x" close button?
I have just replaced the vertical-align: text-bottom; to vertical-align: middle; And I have check this in Windows7 Chrome,IE & FF and looks aligned to me. please check in MAC also.
.ember-power-select-multiple-option {
padding-left: 2px;
padding-right: 5px;
margin: 2px;
font-size: 13px;
font-family: CenturyGothic;
height: 21px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
color: #fff!important;
line-height: 19px;
background-color: #FFB000;
padding: 0 4px;
display: inline-block;
float: left;
}
.ember-power-select-multiple-remove-btn {
width: 15px;
height: 15px;
display: inline-block;
line-height: 13px;
padding: 0;
text-align: center;
vertical-align: middle;
color: #fff;
opacity: 1!important;
font-size: 15px;
font-family: sans-serif;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>
Hope this helps you.
Here is a solution that make use of display: inline-flex;
How does that look in Mac?
.ember-power-select-multiple-option {
padding: 0px 4px 1px;
margin: 2px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
background-color: #FFB000;
display: inline-flex;
align-items: center;
height: 21px;
}
.ember-power-select-multiple-option .text {
display: inline-block;
font-size: 13px;
font-family: CenturyGothic;
border-radius: 10px;
border: none;
color: #fff!important;
height: 16px;
line-height: 14px;
}
.ember-power-select-multiple-remove-btn {
display: inline-block;
padding: 0;
color: #fff;
opacity: 1!important;
font-size: 14px;
font-family: sans-serif;
margin-right: 4px;
height: 16px;
line-height: 14px;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">x</span>
<span class="text">самбука</span>
</span>
I solved my problem in unexpected way.
First of all, I have update addon to newest version, and structure was changed.
<li class="ember-power-select-multiple-option">
<span role="button" aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</li>
Also I set:
vertical-align: middle;
font-family: verdana;
for ember-power-select-multiple-remove-btn class and it looks great. So I assumed that span in another span was not very good structure =).
Now it looks next on both OS.

AwesomeFont to expand equally from the center on hover

I have an edit button, that i want to increase in size when the user hovers over it. It does however stay in line with the text, and doesnt expand equally on every side of the icon, it only expands in the right upper corner.
#quiznavn::after {
font-size: 10pt;
font-family: "FontAwesome";
content: "\f044";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-left: 10px;
margin-right: 5px;
color: black;
}
#quiznavn:hover::after {
font-size: 13pt;
font-family: "FontAwesome";
content: "\f044";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-left: 10px;
margin-right: 5px;
}
https://jsfiddle.net/kbw1yurh/
Use
transform:scale(1.5)
instead with transform-origin set to 50% 50%.
https://jsfiddle.net/foreyez/c17fjsx8/
note: if you're using this on iOS you made need to prefix this with -webkit-transform, -webkit-transform-origin, etc or it won't work.
I don't see this button you're referring to in your code, so I'll assume you have one.
.btn {
width: 120px;
height: 60px;
padding: 0;
font-size: 12pt;
display: table;
}
.btn span {
padding: 0;
vertical-align:middle;
display: table-cell;
width: 70px;
}
.btn span:nth-of-type(1) {
width: 30px;
}
.btn:hover i {
font-size: 17pt;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button class="btn">
<span><i class="fa fa-user"></i></span><span>Click me!</span>
</button>

Css button text issue

I have a CSS button for my site which used to be full with the text in the very middle of it, but now the text is at the bottom and the button is smaller. Other people have had access to my root folder to make amendments and i dont know what they've done.
.button
{
display: inline;
margin-top: 2em;
padding: 1em 2em 1em 2em;
background: #8dc63f;
letter-spacing: 0.20em;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 0.90em;
color: #FFF;
}
.button:before
{
}
try: display: inline-block
That should sort it.
Add display: block; and text-align:center;
.button{
display: block;
text-align:center;
margin-top: 2em;
padding: 1em;
background: #8dc63f;
letter-spacing: 0.20em;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 0.90em;
color: #FFF;
}
DEMO
You can try this :-
text-align: center;
display:table-cell;
vertical-align:middle;
Hope it will help you.