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
Related
I'm trying to set background for my atom text editor from the post
https://discuss.atom.io/t/setting-background-images/9002
I tried the same code and I'm not sure why the editor is not rendering any background image. Can someone please help?
I'm attaching the stylesheet. Styles for setting background is in the last 7 lines of the snippet.
/*
* Code by William Chang and Matt McFarland
* https://medium.com/#docodemore/an-alternative-to-operator-mono-font-6e5d040e1c7e#.ofkdp0aww
* flottflott - http://www.dafont.com/flottflott.font
* Fira Code - https://github.com/tonsky/FiraCode
*/
atom-text-editor {
font-family: 'Fira Code';
font-style: normal;
text-rendering: optimizeLegibility;
}
atom-text-editor.editor {
background: rgba(0,0,0,0);
.syntax--string.syntax--quoted,
.syntax--string.syntax--regexp {
-webkit-font-feature-settings: "liga" off, "calt" off;
}
.syntax--source.syntax--js.syntax--jsx > .syntax--keyword.syntax--control.syntax--flow.syntax--js,
.syntax--storage,
.syntax--type .syntax--function {
vertical-align: baseline;
font-family: 'flottflott';
height: inherit;
font-size: 1.5em;
line-height: 1rem;
}
.syntax--storage.syntax--type.syntax--function.syntax--arrow.syntax--js {
font-size: 1.5em;
line-height: 1rem;
}
.syntax--comment {
font-style: italic;
}
.syntax--source.syntax--js.syntax--jsx > .syntax--keyword.syntax--control.syntax--flow.syntax--js {
font-family: 'Fira Code';
font-style: normal;
}
.syntax--string.syntax--unquoted.syntax--js {
color: #CDD3DE;
}
.syntax--entity.syntax--name {
font-weight: bold;
}
}
.pane {
background: url('http://gzhaixier.com/data/out/62/46169594-dark-background-images.jpg');
background-size: cover;
}
.editor {
background: rgba(0,0,0,0);
}
Thank you!
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?
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/
I'm having one very difficult time getting :link and :visited to work on my links. I have been searching online for literally hours and read over 20 different instances of the same problem. Bizarrely enough, :hover and :active are working. What is going on?
Here's the code lines in my stylesheet:
H1 { text-align: center; width:1000px; font-size: 30pt; font-weight: bold; }
a.artlinks:link {color:#40C0FF; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:visited { color:#FF00FF; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:hover {color:#98D7F6; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:active {color:#FF0000; text-decoration: none; font-family: Cambria, Arial; }
and when I call it in my .html the code is:
<h1>Hello World!</h1>
Does anyone have a solution and also, a more efficient way to give the common a.artlinks parameters simultaneously? Thanks
Your code needs a bit of a tidy up, but this is how I would do it (edit I removed the width property from the h1 for demonstration purposes).
H1 {
text-align: center;
font-size: 30pt;
font-weight: bold;
}
a.artlinks {
text-decoration: none;
font-family: Cambria, Arial;
color:#40C0FF;
}
a.artlinks:visited {
color:#FF00FF;
}
a.artlinks:hover {
color:#98D7F6;
}
a.artlinks:active {
color:#FF0000;
}
See this jsfiddle: http://jsfiddle.net/lharby/zkb8thck/
As the a class has the same properties, you can define those once in a.artlinks (font-family, text-decoration). The other elements that are unique can then be defined for :hover, :active etc.
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; }