Following the advice I found via Google, I have the following SCSS, the fonts exist in the directory specified, and FontAwesome is used elsewhere successfully with the i tag.
What am I doing wrong here as a literal keeps appearing in my html?
#font-face {
font-family: "FontAwesome";
src: url('/fonts/fontawesome-webfont.eot'),
url('/fonts/fontawesome-webfont.svg'),
url('/fonts/fontawesome-webfont.ttf'),
url('/fonts/fontawesome-webfont.woff');
}
$fa-exclamation-triangle: "";
.form-error
{
color:red !important;
font-weight: bold;
padding-top: 3px;
font-family: "FontAwesome";
&:before
{
content: $fa-exclamation-triangle;
}
}
input.error
{
font-weight: normal;
background: $validation-red;
color: black;
}
What am I doing wrong here as a literal keeps appearing in my html?
I assume you mean the generated content shows as literally ?
Well, CSS does not know named entities, so unless your CSS was embedded into the HTML document directly (which from the preprocessor syntax I assume it’s not), this named entity does not get resolved as such, and is meant literally at this point.
The CSS notation for including unicode characters is \0xxxx, with xxxx being the hexadecimal character code.
Related
I have two installations of Laravel including Bootstrap.
As far as I can see both include and have Montserrat on the body tag.
One of the installations needs no declaration of that in the app.sass (meaning it gets included with the bootstrap directly).
However, the other needs it, otherwise it defaults to the browser default font.
And yet, even when both installations have the same Montserrat #import-ed, they look different. I suspect the wrong one is really Montserrat, while the right one is some kind of Bootstrap sugar-coating that the other one can't do.
In order to check it out, please follow:
Desired effect: This link and once you log in with maximilian.berbechelov#gmail.com and 123456 click it again. I know it's Cyrillic, but I don't think it matters.
Problematic effect:
This link - no login required.
I have a body font-family declaration in the sass file (the desired one has no such declaration), because without it the font is the browser default.
You can see your font adding !important after the font-family name like this.
body {
margin: 0;
padding: 0 0 50px 0;
min-height: 100vh;
font-family: "Montserrat", sans-serif!important;
background-image: linear-gradient(45deg, #1de099, #1dc8cd);
}
.navbar-brand {
letter-spacing: 3px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 2.1rem;
}
In our CSS file I see this:
[class*="iconsmall-"]:before {
font-family: 'icons';
font-style: normal;
font-size: 18px;
padding-left: 5px;
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.iconsmall-unknown:before {content: '\e901';}
We have an unknown .svg file. What does \e901 mean and how does it know that its the unknown.svg file being referenced?
I will a similar situation here with this Code Pen:
https://codepen.io/bungeedesign/pen/XqeLQg with \f003 being referenced.
The \ indicates a Unicode character reference follows. Consisting of four hex digits.
The e901 character code is part of a block reserved for private use. And is probably assigned to a particular glyph in the font being used there. I am guessing it is an icon font.
f003 is the same. That CodePen is using the FontAwesome font, and we can see from the FA docs that it corresponds (as expected) to the envelope icon.
The CSS property content can be used to display text, images and SVG code. The \ is a way to "escape" special chars and show specific characters of a font. The \ is always followed by the unicode. In your example it is e901
Usage:
.hello::before { content: "world" } // shows world
.hello::before { content: url('/assets/icons/icon.svg') } // shows a SVG image
.hello::before { content: "\u2663"} // shows ♣ (instead of "\u2663")
More examples: https://css-tricks.com/snippets/html/glyphs/
Have fun!
I am trying to incorporate CSS before content.
I want to put info icon (i), which is "\e608"
#securityCodeLink:before {
content: "\e608";
}
The output looks like this
But if i try with 2701 or something like that
#securityCodeLink:before {
content: "\2701";
}
It works perfectly fine.
Can any one tell me why is this and how can i fix this?
The icon will only appear if you're using a font which supports it.
On StackOverflow (which uses a font-family of Arial, 'Liberation Sans', 'DejaVu Sans'):
\e608 renders as
\2701 renders as ઍ
I researched a lot about this and finally it get Solved..
The icon will only appear if you're using Specific Font which supports it.
In CSS we need to define the font as below.
#font-face{
font-famiy:'nameOfFont';
src: url(data:application/font-woff;charset=utf-8;base64______format("woff");
}
.requiredFont input[type=radio]{
font-family: nameOfFont;
display: inline-block;
text-decoration: inherit;
}
.requiredFont input[type=radio]{
content: "\E608";
}
.requiredFont input[type=radio]:checked {
content: "\E609";
color: reqired HEX Color;
}
Most Probably It will work...when we design the font for the content in radio button we want..
in Aptanastudio 3 . the CSS formatter formats like this :
H1 {
color: white;
background: teal;
FONT-FAMILY: arial, helvetica, lucida-sans, sans-serif;
FONT-SIZE: 18pt;
FONT-STYLE: normal;
FONT-VARIANT: normal
}
I´m trying to edit it to write the code like this (all in one line) :
H1 { color: white; background: teal; FONT-FAMILY: arial, helvetica, lucida-sans, sans-serif; FONT-SIZE: 18pt; FONT-STYLE: normal; FONT-VARIANT: normal}
under the CSS formatter options, i can edit the spaces between commas, semikolon, e.t.c. .. but i cant find how to edit the code to look the way i want it.
When you type H1 {} instead of hitting enter when it auto completes the curly braces just start typing your rules out. Also don't rely on (or use) the auto formatter. With rare exceptions (Aptana not being one of them, I love Aptana for web applications and use it every day) auto formatters for code will not do exactly what you want them to.
I strongly advise against writing your css the way you desire. The first way is much easier to read. Also most hosting solutions and even a lot of frameworks (like Rails for example) will minify your code for you. And even if your's doesn't you can minify it yourself pretty easily.
When developing: 'readability = maintainability' which is always of greater value then a few saved bytes here and there.
I am trying to add a custom font to my website. I have tried lots of things but didn't succeed. Here is my css code:
#font-face
{
font-family: myFirstFont;
src: url('ellis.ttf');
}
body
{
margin: 0;
padding: 0;
width: 100%;
cursor: default;
font-size: 11px;
line-height: 1;
font-family: myFirstFont,arial,san-serif;
overflow:auto;
background:#ecf6f7;
}
I know this is not a cross browser case, but I am trying to make work a simple case at first.
add format("opentype"); after URL
apply font like this..
#font-face
{
font-family: 'ellis';
src: url('ellis.ttf');
}
.body
{
font-family: "ellis";
}
on both the font-family declarations add speech marks.
so add to both #font-face and body:
font-family: "myFirstFont";
Or alternatively try this to make sure all code is correct and to make sure its not the code:
http://www.fontsquirrel.com/fontface/generator
It also may sound stupid, but make sure all spellings of fonts and paths are correct.
Are you sure that the font file is being referenced in the right place? The file ellis.ttf will be referenced from wherever the Stylesheet is.
If you have your HTML page at http://website.com/page.html, but your CSS at http://website.com/css/page.css then it'll look for ellis.ttf at http://website.com/css/ellis.ttf.