Font-Awesome icons not loaded due to piece of CSS code - html

I am trying to integrate font-awesome into a web project but an identified little piece of code in my css makes the font-awesome icons appear as white squares. When I remove the little peace of CSS code it works but I cannot remove it due to the current web site layout. Is there a way to make the icons appear right anyway?
This is the code that blocks the icons that is needed for the layout:
*,*:before,*:after{
box-sizing: border-box;
position: relative;
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
It doesn't matter if font-awesome css is included before or after my custom css code. The issue remains...

Your font-family is being overwritten to Arial. Remove the font related parts from this selector and add it to a body selector.
*,*:before,*:after{
box-sizing: border-box;
position: relative;
}
body {
font-family : Arial;
font-size : 12px;
font-weight : normal;
}

The problem is in *:before so you have to change that in you css. Take a look at this https://jsfiddle.net/ss95sfLz/
CSS
*,*:after{
box-sizing: border-box;
position: relative;
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
This is problem because font-awesome icon use :before and this is the code
.fa-balance-scale::before {
content: "";
}

You are overriding all (*) of the fonts in the :before and :after pseudo selectors; which are used by font-awesome and many other libs. You should try to target only what needs to be changed by that code-snippet with a .class or #id.

Related

Line Spacing for Individual Fonts

I'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}

IE11 Not recognizing the content declaration for Font Awesome

I am using Font Awesome 4.4.0 and noticed that icons only show in IE11 when I use HTML such as . However, IE11 does not recognize the "content" declaration in the Font Awesome CSS. An example of such a class is:
hr.code-light:after,
hr.code-primary:after {
content: "\f121";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
When I apply the code-light or code-primary class to the HR tag, no Font Awesome icon appears. In IE11, Font Awesome icons only appear when I specify it in the HTML.
Anyone know a fix or workaround to this issue?

Pseudo element before content ignoring \ in browser

I have this really basic issue I am trying to solve for a while now. I am running out of all ideas.
I have a css pseudo-element before that I am styling like this.
#fPhone::before{
color: #78be20;
content: "\e622";
font-family: icons;
}
But on the browser it just prints out 622. When I inspect the pseudo tag, I see
content: "e622";
If I try adding "\" in the debugger it works but for some reason it doesn't pick it up from css.
I am running out of reasons that could be causing this.
Sure you imported the icon-font correctly and are using the proper hexcode? Below proof that it works as you may expect...
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
#fPhone::before{
color: #78be20;
content: "\e0cd"; /* different code, but same effect */
font-family: 'Material Icons';
}
/* class is pre-defined in #import (default <parent>color, 24px)*/
.material-icons { color: #78be20; font-size: 16px; }
/*
find the codes and ligatures for Material Icons at:
https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
*/
<div id="fPhone"> a phone</div>
<div><i class="material-icons">phone</i> using ligature name</div>

Custom icon twitter bootstrap

I've already found this post
How to add custom icon in Twitter Bootstrap?
But applying that solution it still computes me a 0x0px icon, I still can't understand how that may be possible but here's my sample code:
HTML
<i class="icon-linkedin"></i>
CSS
.icon-linkedin {
background-image: url("../../resources/img/icon-linkedins.png");
background-position: center center;
}
I haven't made one in bootstrap in a while, but it looks like the syntax might be a bit different now than it was when that post was made. This is how you generally would use an icon font with an element (or rather, a pseudo-element) with ANY icon font.
/* this just imports the font */
#import url(http://weloveiconfonts.com/api/?family=fontawesome);
.icon-linkedin:before {
font-family: 'FontAwesome', sans-serif;
content: "\f0e1";
}
DEMO

Recreate the "thin" font that iCloud Beta is using

I'm looking to recreate the "Sign in to iCloud" text on http://beta.icloud.com
I have already copied all the styles attributed to that line of text, and everything is in order apart from the thickness of the text. I see Apple has applied the font-weight 300 to the style, which should and does make it thinner, however when I copy and paste the exact same code my browser renders it thicker on my own webpage. My question is, how is Apple making the text thin like that or how can I achieve the same effect?
The code from them that I have used so far is:
position: absolute;
color: #FFF;
left: 0px;
right: 0px;
height: 40px;
top: 131px;
font-size: 35px;
font-family: "Helvetica Neue",sans-serif;
font-weight: 300;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
Any ideas on what could be causing it to render at normal thickness? I have no conflicting styles and this is the only code relating to my line of text
Using the CSS given I can get the same style as on iCloud website. (http://jsfiddle.net/LeBen/WznR5/)
After font-weight, the property that can slightly change the appearance of text on webkit browsers is -webkit-font-smoothing: antialiased;. If you don't use it, the browser fallback to the default smoothing mode (subpixel-antialiased) and result in a text looking bolder.
Are you sure you've included it in your tests and your browser apply it?
Try Avenir Ultra Light it's a thin font that looks similar to it
http://www.typophile.com/node/42590