Padding issues (?) with custom icon font. Example below - html

I have created an icon font using custom .svg icons and I am having a problem with the padding (or possibly something else). The icons I used to not include any padding, in case that question comes up.
For some reason, the icons seem to have shifted above where they should be and I can't find any way to get them back down into the container. Here is an example of what I am talking about: http://i.imgur.com/RwOKWLp.png
I have set the "background-color" to yellow to highlight my problem.
Here is the HTML for one icon:
<div class="vicon" aria-hidden="true" data-icon=""></div>
Here is the CSS that I am currently working with:
[data-icon]:before {
font-family: 'iconfont';
content: attr(data-icon);
speak: none;
font-size: 100%;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.vicon {
display: inline-block;
font-size: 50px;
margin-top: 1em;
background-color: yellow;
}
#font-face code:
#font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
url('[font_location_on_company_server].woff') format('woff'),
url('[font_location_on_company_server].ttf') format('truetype'),
url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone have any idea why this might be happening?

The problem is not CSS but your font's baseline height (see http://icomoon.io/#docs/font-metrics)
It means the font metrics are wrong. I don't know if you have them changed or if it was a bug from Icomoon but I've been able to export a correct font right now.
Anyway you cannot (or at least you shouldn't) "correct" this with CSS. The best way is to change the font.

Related

How to get the sound icon from https://www.larousse.fr?

I'm trying to download as png the sound icon from this url.
I inspected the CSS and it shows that
.lienson:after {
font-family: "fontello";
font-size: 20px;
font-weight: normal;
font-style: normal;
display: inline;
content: '\e82c';
color: #ff4b54;
text-decoration:none;
cursor:pointer; /*gestion v.audio*/
}
#font-face {
font-family: 'fontello';
src: url('./../fonts/fontello.eot?58255341');
src: url('./../fonts/fontello.eot?58255341#iefix') format('embedded-opentype'),
url('./../fonts/fontello.woff?58255341') format('woff'),
url('./../fonts/fontello.ttf?58255341') format('truetype'),
url('./../fonts/fontello.svg?58255341#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.fontello {
font-family: "fontello";
}
I guess the link to download is ./../fonts/fontello.svg?58255341#fontello but could not figure out what is the full link?
Could you please elaborate on how to get this icon?
It's not a png, it's a webfont.
So, either you odwnload it directly from the url, which i wouldn't recommend because it would potentially raise copyright issues. FYI in this case the font url is relative to the css file url.
Or you make a screenshot of the element, which raise similar issues oif you use it.
Or you search for that font online, which could be a fail, since fontello is a font building tool, and the font you're searching for could simply not exist in the public domain.

CSS font is not working regardless any change that i made

Hi I know that there are some topic regarding this matter but rest assured i have been looking for solution in those topics but i could not find any solution.
I have tried my best but it still won't get fixed.
So this is my CSS font:
#font-face {
font-family: 'quicksandregular';
src: url('font/quiksand2/quicksand-regular-webfont.eot');
src: url('font/quiksand2/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/quiksand2/quicksand-regular-webfont.woff2') format('woff2'),
url('font/quiksand2/quicksand-regular-webfont.woff') format('woff'),
url('font/quiksand2/quicksand-regular-webfont.ttf') format('truetype'),
url('font/quiksand2/quicksand-regular-webfont.svg#quicksandregular') format('svg');
font-weight: normal;
font-style: normal;
}
and here is the body css
body {
font-size: 12px;
padding: 0;
height: 100%;
width: 100%;
margin: 0;
background-color: #f7f2e2;
font-family: Quicksand;
letter-spacing: -1px;
overflow: auto;
position: absolute;
}
somehow the font is still not show up in my site. It did show up when i have Quicksand font installed in my PC but as soon as i removed the quicksand font, the font switched into a default serif font. This is not what i really wanted since i want other PC to be able to show the font that i used, which is quicksand.
I did check up the font folder is exactly the same in my root folder. By my understanding, the quicksand font should be showing.
The question is, what is my mistake? I would be happy if someone responded to me and reply within 1 day maximum.
You will have to put '' and your font inside that. As this is how it is being generated in the css.
Example:
font-family: 'quicksandregular';
Hope this works.
Everthing is fine but you need to change is the css that is applied
and here is the body css
body {
font-size: 12px;
padding: 0;
height: 100%;
width: 100%;
margin:0;
background-color: #f7f2e2;
font-family: quicksandregular;
letter-spacing: -1px;
overflow:auto;
position:absolute;
}
Just make the following change to your code it will work.
font-family: quicksandregular;
Inside your #font-face, you have declared the font-family property to quicksandregular. Hence, you have to use font-family: 'quicksandregular' or font-family: quicksandregular in your CSS code.
Also, a good thing to do would be to rename the #font-face to QuickSand, and have multiple QuickSand font-faces with different font-weight properties, because this will allow you to use it in structures like this:
.myRegularText {
font-family: 'QuickSand';
font-weight: regular;
}
.myBoldText {
font-family: 'QuickSand';
font-weight: bold;
}
I can't know weather you have a problem with file path or not, since I cannot see the structure of your server's directory, but we assume the following structure:
<root> /
style/
main.css
font/
quicksand2/
<font-files>
In this case, you will have to use
#font-face {
font-family: 'QuickSand';
src: url('/font/quicksand2/<file-name>');
// ..
}
or
#font-face {
// ...
src: url('../font/<file-name>');
// ...
}
Hope that helps.

How do I change my list item style with a foundation icon?

I've downloaded a set of foundation icons but I'm having a hard time finding documentation on how to use this icons in my css code.
I know I can use it in my markup as so:
<i class="fi-check"></i>
but I want to include it in my css file
#import url("foundation-icons/foundation-icons.css");
and start using them here. for example I want to change all the list item styles to be checkmarks. Basically what I want is:
.myClass li { list-style: fi-check; }
Is it possible to do this somehow?
It would be easiest to use them in your markup as you've pointed out.
<i class="fi-check"></i>
However if you want to recreate this for your own custom style you'd have to recreate/change the css rules found in foundation-icons.css
First you'd need to pull in the #font-face:
#font-face {
font-family: "foundation-icons";
src: url("foundation-icons.eot");
src: url("foundation-icons.eot?#iefix") format("embedded-opentype"),
url("foundation-icons.woff") format("woff"),
url("foundation-icons.ttf") format("truetype"),
url("foundation-icons.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
}
Then you'll need to add it to your custom css like so:
.myClass li:before {
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
content: "\f126";
}
The last line references the check icon in the foundation-icons file. So, if you wanted to change the icon to something else you'd need to look through foundation-icons.css to see what code to put into the content section.
For example:
trash = content: "\f204";
stop = content: "\f1ef";
Hope this makes sense!

numbers of font are larger than letters

im working on a license plate previewing script
everything is going great, except for the fact that in this custom font, numbers are larger than letters despite them having the same font-size declared.
here is a screenshot:
the font is: http://www.dafont.com/mandatory.font
i used the font squirrel generator to get the files and css for it.
heres the css:
body {
margin: 0px 0px;
background: #3AB54B;
color: #000000;
font-family: 'mandatoryregular';
text-align: center;
font-size: 150px;
}
#font-face {
font-family: 'mandatoryregular';
src: url('fonts/mandator-webfont.eot');
src: url('fonts/mandator-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/mandator-webfont.woff') format('woff'),
url('fonts/mandator-webfont.ttf') format('truetype'),
url('fonts/mandator-webfont.svg#mandatoryregular') format('svg');
font-weight: normal;
font-style: normal;
}
my question is, how can i fix this? im also using php. the only way ive thought of so far is to use php to go through each character and if it is numeric, have it add a span around the character then declare a different font size in the css.
but is there a better/easier way?

CSS Font Rendering Issue

I am developing a website. I'm using a google font to style my page. But it's not displaying correctly. I've read up a bit on faux fonts, but I believe that only applies when the font that is needed is not supplied. I've imported my google font, code is
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wprx7IBmrqA5IG9z8WNe77b9o.woff) format('woff');
}
My CSS for the font is
font-size:30px;
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
But I believe it's displaying a faux font. Here's the difference between an image of what it should look like on the left, and what it's displaying on the right.
My problem http://resource.theboulderdesign.com/400/homebox/gettingcompare.png
I hope someone can solve my problem.
Morgan Kenyon
It's a Chrome/Windows problem. It'll affect the font thickness and letter spacing, but you can add a white text-stroke to smooth it out:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
-webkit-text-fill-color: white;
Demo: http://jsfiddle.net/zzmbu/
Here's a screenshot of it:
I've also found that if you add
text-shadow:0px 0px #FF0000;
property to my CSS, it renders correctly. I don't know why though.