I have some css that puts a glyphicon at the beggining of an input field. It works but the value of the glyphicon is incorrect and I cannot find the padlock?
The code is :
.usericon input{
padding-left:25px;
}
.usericon:before{
opacity:.8;
height:100%;
width:25px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
position: absolute;
content:"\e033";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
pointer-events: none;
-webkit-font-smoothing: antialiased;
}
The problem is that \e008 isn't correct it's actually 2709. How can I find this value for the padlock?
Related
When building forms,I need to indicate which are required. I follow this recipe:
<span class='glyphicon glyphicon-asterisk' style'color:red;font-size:9px;'></span>Label
My goal is to create 1 CSS class that uses the Bootstrap glyphicon class as well as bootstrap's glyphicon-asterisk But also allowing me to combine my own style rules.I have read that people use LESS mixins to do this. However I am asking if it is possible to go another route
The code looking something like this:
.req{
position:relative;
top:1px;
display:inline-block;
font-family: 'Glyphicons Halflings';
font-style:normal;
font-weight:normal;
font-size: 9px;
font-color:red;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content:"\2a";
}
However for some reason this does not work.
This is the two bootstrap classes I wish to combine.
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
How can I achieve this without using LESS or SASS or any preprocessor So that when using the code:
<span class='req'></span>Label
I will receive the same output as the original one.
Note I do not want to overwrite the existing bootstrap classes. I want to create a new class in my own style.css that makes use of the two bootstrap classes.
There is no font-color CSS property, you have to use color. And if you want to use just one class you can use this code.
.req {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
font-size:9px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.req:before {
content: "\2a";
color: red;
}
The problem is that you use the 'content: "\2a"' inside the .req however you can assign content only to :before or :after.
I have two style sheets, a ltr and an rtl version. Take the following snippet
#if $text-direction == 'ltr' {
.arrow-link:before {
content: "\e021";
font-family: 'iconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
display: inline;
padding-right: 5px;
vertical-align: middle;
}
}#else {
.arrow-link:after {
content: "\e023";
font-family: 'iconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
display: inline;
padding-left: 5px;
vertical-align: middle;
}
}
This works as expected using english. But If i swap for hebrew text the icon is palced ont he wrong side and Im not sure why. This fiddle explains better, the last span with hebrew text places the after element before.
https://jsfiddle.net/2zze9q8z/
There's a slight difference between the way Chrome for Windows and Chrome for Mac handle content added in CSS to :before.
Here's the CSS for the following:
.s-smiley:before {
content: "\EA20";
}
.s-smiley {
color: white;
background: #D8D8D8;
margin-top: 46px;
margin-right: 16px;
padding: 9px;
font-size: 37px;
line-height: 29px;
}
.s-smiley {
background: #50E3C2;
}
.s:before {
display: inline-block;
font-family: symbols;
font-style: normal;
font-weight: 400;
line-height: 37px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
The issue is that in Windows - the content seems to be pushed down and also takes up room. Anyone else know this issue? Is there a fix for it?
Chrome for Windows:
Chrome for Mac:
hard to say without complete code but try this:
.s:before {
display: block;
float:left;
font-family: symbols;
font-style: normal;
font-weight: 400;
height: 37px;
line-height:37px;
overflow:hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
http://jsfiddle.net/kmrjy11d/
also make sure your font files are correct
I use a template for my web project and in asp.net. In localhost my icons seen clearly like top of picture but when i upload it to host it seen like below the correct one. When i look css codes of template i saw like this:
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.1.0');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
.icon-large:before {
vertical-align: -10%;
font-size: 1.3333333333333333em;
}
a [class^="icon-"], a [class*=" icon-"], a [class^="icon-"]:before, a [class*=" icon-"]:before {
display: inline;
}
[class^="icon-"].icon-fixed-width, [class*=" icon-"].icon-fixed-width {
display: inline-block;
width: 1.2857142857142858em;
text-align: center;
}
[class^="icon-"].icon-fixed-width.icon-large, [class*=" icon-"].icon-fixed-width.icon-large {
width: 1.5714285714285714em;
}
ul.icons-ul {
list-style-type: none;
text-indent: -0.7142857142857143em;
margin-left: 2.142857142857143em;
}
ul.icons-ul > li .icon-li {
width: .7142857142857143em;
display: inline-block;
text-align: center;
}
[class^="icon-"].hide, [class*=" icon-"].hide {
display: none;
}
.icon-muted {
color: #eee;
}
.icon-glass:before {
content: "\f000";
}
I am not good at css. What is that and how can i solve this?
Make sure you also upload the font to the webhost, and link it correctly according to this line: ../font/fontawesome-webfont.eot?v=3.1.0
I am trying to make the font in h1 less bold. It seems like the letters are just to fat.
CSS:
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; }
#font-face {
font-family: 'ballparkweiner';
src: url('ballw___.eot');
src: url('ballw___.eot?#iefix') format('embedded-opentype'),
url('ballw___.woff') format('woff'),
url('ballw___.ttf') format('truetype'),
url('ballw___.svg#ballparkweiner') format('svg');
font-weight: normal;
font-style: normal;
}
h2 { margin: 0px; text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}
body {background-color: #000000;}
h3 {text-align: center; color: #FFFFFF; }
#footer { font-weight: bold; text-align: center; font-family: Audimat;
clear: both; width:48%;
border-radius: 8px;
background-color:black;
text-align:center; margin-right:auto;
margin-left:auto; color: #FFFFFF; }
From the information I gathered on-line, most said to use font-weight: lighter;
but that doesn't validate when I use the css validator. Any ideas?
Add this:
h1 { font-weight: normal; }
By default, browsers use bold weight for h1. Since your #font-face declares only normal weight typeface, (some) browsers will algorithmically bold the glyphs (i.e., make the strokes wider using some simple method).
I checked your css validate, where did you checked? Probably you checked for css2 validation. Check here this one is original/best http://jigsaw.w3.org/css-validator/validator
I actually just added the font weight line (I had it under the #font face instead )
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; font-weight: lighter; }