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>
Related
I'm developing a site on Ubuntu. When I look at it in Firefox, it's a lot smaller than when I view it in Chrome. Screenshots:
Both browsers have their default fonts set to DejaVu Serif at 16px. I haven't messed with Bootstrap's default font size. It's still 1rem.
What's accounting for this discrepancy, and is there a way to further normalize the differences between browsers?
EDIT: My scss, even though it's not relevant, because it was requested:
$theme-colors: (
"burnt-orange": #fa7334,
"light-blue": #67e2f5,
"dark-blue": #006f80,
"beige": #f5d5bc
);
.header-icon {
font-size: 1.4rem;
}
#jumbo {
background: transparent;
border: 1px solid grey;
}
#diva-sidebar ul {
list-style-type: none;
padding-left: 0.65em;
}
#footer a {
color: white;
}
.errors {
border: 1px solid #c70f36;
color: #c70f36;
background-color: #ffc0cb;
}
#import "~bootstrap/scss/bootstrap";
#import "~#fortawesome/fontawesome-pro/css/all.css";
.header-icon-link-blue {
color: theme-color("dark-blue") !important;
:hover {
color: theme-color-level("dark-blue", 2) !important;
}
}
.header-icon-link-orange {
color: theme-color("burnt-orange") !important;
:hover {
color: theme-color-level("burnt-orange", 2) !important;
}
}
.color-burnt-orange {
color: theme-color("burnt-orange");
}
EDIT: After adding
html {
font-size: 16px;
}
To my custom.scss file, but the problem persists.
I found a similar issue when designing sites using Bootstrap 4.x. The issue is Bootstrap uses the browser's default font size, and then sets relative font sizes from this. However, Firefox and Chrome seem to use a different default size, which causes issues most noticeably when you are using larger fonts on headings. The easiest solution is to set an exact base font size on the html to override the browser default, like so:
html {font-size:16px;}
I think, you need to prefix your css code. Because, all browsers has a prefix code so: -webkit, -o, -moz ets. Go this Link and past your css left column and copy css from right column: for example: Kindly mark it as Answer if it solved your problem :)
How can i change this for one browser while having it differently for another??
h2 {
font-size: 150%;
color: red;
}
Thanks. like making it blue or 175% on another
The part of solution by dude below.
#-moz-document url-prefix() {
h2 {
font-size: 150%;
color: red;
}
}
See it here
See other Firefox specific css extensions here
Simple writeup on 'Tricks' here
Edit
About other browsers: You can find a lof of useful browser-specific CSS 'hacks' on browserhacks.com
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.
What is the best way to change Polymer Paper Elements default font from Roboto to a custom font?
I used the --paper-font-common-base: {} mixin to define my font and this works in most places... but not all. In places like the paper-toolbar for example there is still Roboto applied.
Is there another way to do this?
EDIT
I see the offender now. Inside paper-styles/typography.html there are loads of mixins that specifically define the font... eg
--paper-font-title: {
/* #apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* #apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* #apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
font-weight: 500;
line-height: 28px;
};
Why are the #apply blocks here commented out? If these weren't commented by default it looks like this wouldn't be a problem. But now I have to go and override every mixin!
EDIT 2
I see there is a note at the top of the typography.html file
/*
Unfortunately, we can't use nested rules
See https://github.com/Polymer/polymer/issues/1399
*/
But this doesn't seem to be true, in Chrome anyway. If I uncomment the #apply(--paper-font-common-base) lines in all the mixins it seems to work. Is this a browser issue?
Overriding the --paper-font-common-base mixin is the correct approach.
The following CSS code should work.
:root {
--paper-font-common-base: {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
};
}
I was unable to find the issue you pointed out, it probably was fixed already. When inspecting the following files, the --paper-font-common-base is being applied as expected.
https://github.com/PolymerElements/paper-styles/blob/master/typography.html
https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html
I am using a theme from ThemeForest that is utilizing icon fonts. In the css files I see a #font-face to import the fonts and a list of all the icons as such:
.socials li.social-lastfm a:before,
.socials li.social-soundcloud a:before {
font-family: 'icomoon-essential';
speak: none;
font-style: normal;
font-weight: normal;
line-height: 1;
color: green;
-webkit-font-smoothing: antialiased;
}
In this example there are several more icons, however of all the icons that I have on the theme only one of them turns green. I have added new rules to this css including .socials li.social-twitter a:before etc..
Even with the addition of rules, the color of the icons are not changing. As I am using WordPress, I went into the backend in order to determine if I could change the icons through some sort of plugin. To my demise, I cannot find a solution.
If you know of a way that I could fix the problem please let me know.
It's better if you could post your html code here too so we can figure out what's the problem is. Supposely the html code is like below:
<ul class='socials'>
<li class='social-lastfm'><a href='#'>Icon A</a></li>
<li class='social-soundcloud'><a href='#'>Icon B</a></li>
</ul>
Try to use !important to rewrite previous css.