We are using glyphicons, FontAwesome and our custom Icon-Font.
Now I'm getting to the issue that these icons are not on the same line:
We have an CSS Class that makes the icons bigger and with that the icons are on the same line:
.icon-5x {
font-size: 5em !important;
vertical-align: text-bottom;
}
After that I tried to add vertical-align:text-bottom; to the base CSS class of the icon-fonts:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
vertical-align: text-bottom;
}
[class^="icon-custom-"], [class*=" icon-custom-"] {
display: inline-block;
font: normal normal normal 14px/1 custom-icons;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
vertical-align: text-bottom;
}
.glyphicon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font: normal normal normal 14px/1 'Glyphicons Halflings';
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
vertical-align: text-bottom;
}
But now the icons are still not on the same line :(
I think I could solve this problem if I make only one custom fonts which contain all 3 icon-fonts but I want to be able easily update fontAwesome or Glyhpicons...
Any ideas?
Here is my Solution:
[class^="icon-custom-"], [class*=" icon-custom-"] {
display: inline-block;
font: normal normal normal 14px/1 custom-icons;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
vertical-align: text-bottom;
line-height: 1;
}
.glyphicon {
top: 0px!important;
vertical-align: text-bottom!important;
}
.fa {
line-height: 1!important;
vertical-align: text-bottom!important;
}
Related
I have defined two links and made them look like buttons using css styling.
HTML code looks like this:
<h2 style="text-align: center;"><strong>Continue to </strong> <a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> <a class="btn-red" href=""><strong>BUY</strong></a></h2>
How it should look
But on mobile devices, these two buttons collide.
Wrong mobile device look
Is it possible to style them using css, to display correctly, without collision?
btn-red class example is here:
.btn-red {
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 8px 40px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;}
a.btn-red {
background-color: #dd0000; /* change background color here */
border: 2px solid transparent;
color: #fff!important; /* change font color here */
font-weight: bold;}
a.btn-red:hover {
background: #dd0000; /* change background color on hover here */
border: 2px solid transparent;
padding: 8px 54px 8px 40px !important;}
a.btn-red:after {
font-family: 'ETmodules';
font-size: 32px;
opacity: 0;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
line-height: 1em;
content: "\35";
position: absolute;
margin-left: -1em;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;}
a.btn-red:hover:after {
opacity:1;
display: block!important;
font-family: 'ETmodules';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
right: 0px;
top: 5px;
margin-left: 0;}
EDIT:
I tried to use responsiveness for padding, which should be enough to solve my issue, but its not working as intended. What exactly is wrong? Code is included in btn-red class.
code here:
#media only screen and (min-width : 1024px){ padding: 8px 40px;}
#media only screen and (max-device-width : 320px) {padding: 2px 10px;}
I think this might work. However, I am not sure.
<h2 style="text-align: center;"><strong>Continue to </strong> <a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> <a class="btn-red" href=""><strong>BUY</strong></a></h2>
I had just added six times.
You can do this ...
Place "Continue to" & the buttons in two separate div elements.
HTML:
<div class="display-ib">Continue to</div>
<div class="display-ib">
<button class="btn1"></button>
<button class="btn2"></button>
</div>
CSS:
.display-ib {
display: block;
}
#media (min-width: 768px) {
.display-ib {
display: inline-block;
}
}
Being mobile first as per the trend today
I am trying to make my div wrap the <i> tag however it doesn't wrap, the height is always higher of my div, and my <i> tag has no padding or margin, i tried many things but doesn't work, i am adding my style and the html code, i am also going to add some screenshots
CSS
<style>
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
.button-content-ic {
display: inline-block;
margin: auto;
}
body, section, div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
HTML
<div class="button-content-ic">
<i style="color: #fff;" class="material-icons">menu</i> </div>
SCREENSHOTS
tag
wrapper tag
Thanks in advance for your help.
Maybe this is what you looking for:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
display: block!important;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
color: #ffffff;
}
.button-content-ic {
background-color: #555555;
display: inline-block;
margin: auto;
}
body,
section,
div,
i {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="button-content-ic"><i class="material-icons">menu</i>
</div>
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;
}
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>
I don't know why this is happening, but my FontAwesome icons are appearing offset in Safari.
In Chrome they look like this:
In Safari, like this:
Now, I'm using Foundation, React.js, and FontAwesome, so providing the CSS via JSFiddle proved very cumbersome. I tried to skin off as much as I can and make it barebones, and I believe you can still see it happening in this JSFiddle. Just look at it in Safari and then in Chrome and you should notice an offset.
Here is the JSFiddle laid out here:
HTML:
<div class="line">
<i class="fa fa-cog"></i>
<span class="name" >cfb</span>
</div>
CSS:
.line {
color: #60b0c6;
text-transform: capitalize;
}
.name {
font-size: 13px;
cursor: pointer;
width: 93%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
position: relative;
top: 6px;
left: 2px;
}
.fa-cog {
font-size: 12px;
margin-right: 4px;
opacity: 1;
cursor: pointer;
color: #333;
}
.fa {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I have no idea how to fix this and am very puzzled.
Edit: Vertical align does not work on my end.
Adding vertical-align fixes it:
.fa {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: middle; /* Or try bottom or baseline */
}
Remove top and left from .name class and give vertical-align will do the trick.
Here i use vertical-align:top;
.name {
font-size: 13px;
cursor: pointer;
width: 93%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
position: relative;
vertical-align:top; //Here.
}
.fa {
position: relative;
display: inline-block;
vertical-align:top; // Here
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Working Fiddle Checked in Firefox, Chrome, Safari.
I think you could achieve that by defining vertical-align: middle.