http://www.wordherd.co/#features
On this site, when I try to look at the source image file of any of the icons (like "Directions") using Firebug, it displays some sort of unicode for the content.
How do you get to the source image files? I'm trying to understand the hack they are using to prevent the images from being accessible.
These "images" are icons fonts. They are usually added via :before/:after pseudo elements. In this instance, the content value is an ASCII representation of an external font library character.
.icon-flag:before {
content: "\f024";
}
In order for this to work, you would need to change the element's font-family property to reference the external font library. In your case, the font library is FontAwesome.
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
Using the Font-Awesome library, you could simply add an icon like this:
<i class="fa fa-stack-overflow"></i>
Since it's treated like font, you can increase the size of it using the CSS property font-size. (example)
.fa-stack-overflow {
font-size:30px;
color:orange;
}
Related
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 rebuild this website in Polymer: http://qprogrammers-mockup.webflow.io/. So I can extend it easily in the future. I have everything down and I am using the same font, font-weight, font-size and I checked this with a chrome extension whatfont?.
But the fonts seems different. The example website is still much sharper. I read the css, but I cannot find out why. I also added:
body {
background-color: e8e8e8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
Given your example, I cannot tell how much more CSS you have. But this may just be a case of you not invoking the webfont Open Sans and your browser is reverting to whichever sans-serif it is using. You could add the following line to the top of your CSS and see if it makes a difference:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
Finally, you are missing a '#' on your background color property:
background-color: #e8e8e8;
I have a simple svg (drawn by me in illustrator), which I am trying to convert to a webfont (together with other svg's). When I open an svg in an editor I see it correctly (black pawn shakes a hand with a white pawn). The same way if I am converting it to png.
But after I converted it to a webfont with grunt webfont
webfont: {
icons: {
src : 'path/svg/*.svg',
dest : 'path/fonts',
destCss : 'path/css',
options : {
autoHint: false,
font : 'icons',
hashes : false
}
}
}
But in the webfont it looks really strange (everything is transparent except of the outline)
Here is an example of my webfont and css generated for it:
#font-face {
font-family: 'icons';
url('font/icons.woff') format('woff'),
font-weight: normal;
font-style: normal;
}
.icon {
font-family: 'icons';
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon_draw:before {
content: '\f103';
}
I have high belief that the problem is with my svg (all other fonts look nice: some of them are mine and some taken from other sources). But I have no idea what is wrong.
P.S. I tried to include all relevant and not relevant details, but if you need something else (or I forgot something else) please let me know.
I am not familiar with grunt-webfont, so the following is just an educated guess.
SVG defines that the fill property defaults to black. Your black pawn has no defined fill, so it is defaulting to black when rendered in a proper SVG renderer.
However my guess is that the SVG to webfont converter utility does not appreciate that rule and is only looking at the properties defined on the shape itself. If I am right, explicitly setting the fill to black on the black pawn body shape may fix your problem.
Also I noticed that the way you have done the arm of the black pawn is a little strange. You have made a piecemeal shape and filled it by drawing a whole lot (25 by my count) of thick short strokes. Font renderers expect glyphs to be defined using closed filled shapes. Not doing it that way may cause problems. Ideally the arm should be a single filled shape. On the other hand, it may work perfectly fine.
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..
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.