Zurb Foundation icons general enclosed - asp.net-mvc

Question

I'm trying to use the Zurb Foundation General Enclosed font icons. I downloaded the files, they have filename extenstions of "sgv", "ttf", "woff". I'm not sure how to include them in the page. I'm completely new to this.
I've searched google and read a few blogs on this but I'm still confused.
I'm not sure how to set up the files to get them to work.
My platform is asp.net mvc.
Thank you

Answer 1

I downloaded the files, they have filename extenstions of "sgv",
"ttf", "woff". I'm not sure how to include them in the page.
After you downloaded the files you will have the following Foundation Fonts folder structure:
- foundation_icons_general_enclosed
--- fonts
--- saas
--- stylesheets
In an ASP.net project it's better that you have the styles in a separate file so you can update quickly in case there are updates from Foundation. You can copy them into their own folders too. So you have a Content folder by default, and you can have the following structures:
- Content
--- fonts - copy `eot`, `sgv`, `ttf`, and `woff` files
--- addon - copy `general_enclosed_foundicons.css`
After you copied the files you need to adjust the styles to point to the correct font files, for example:
#font-face {
url("../fonts/general_foundicons.eot")
Then reference the files so you could use them in your project
<link href="#Url.Content("~/Content/addon/general_foundicons.css")"
rel="stylesheet" type="text/css" />
And you can start using them by doing <i class="foundicon-[icon]"></i> as shown on the playground. For example:
<i class="general foundicon-add-doc"></i>
// to use it as a link
<i class="general foundicon-add-doc"></i>
Additional Tip for Deployment
If its the first time you used fonts in a website, the fonts will not work after deployment. If you encounter that issue make sure you have the following MIME types in your IIS. I forgot which ones are in by default but I'm sure you won't have the following by default:
File name extension: .svg
MIME type: image/svg+xml
File name extension: .ttf
MIME type: application/octet-stream
File name extension: .eot
MIME type: application/octet-stream
You can leave out .woff and it will work.

Answer 2

When you download the fonts, you'll be able to simply merge the stylesheets and fonts folders straight into Foundation. Here's what the CSS looks like:
#font-face {
font-family: '[set]Foundicons';
src: url('fonts/[set]_foundicons.eot');
src: url('fonts/[set]_foundicons.eot?#iefix') format('embedded-opentype'),
url('fonts/[set]_foundicons.woff') format('woff'),
url('fonts/[set]_foundicons.ttf') format('truetype'),
url('fonts/[set]_foundicons.svg#[set]Foundicons') format('svg');
font-weight: normal;
font-style: normal;
}
[class*="foundicon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
}
[class*="foundicon-"]:before {
font-family: "[set]Foundicons";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
}
This is how you use it.
<i class="foundicon-[icon]"></i>
From the Foundation documentation.

Answer 3

phantom edit
Just after posting a blurb on zurb icon fonts not working on F4... viola, I fixed it. So I'm redoing my post to add some much needed clarification:
The instructions on the Zurb site are typically a bit on the vague side. It requires general knowledge of sass, and for sass noobs it gets confusing fast. So here we go:
1) After downloading the files, copy them over to the applicable directories in your Foundation folder. I'm using Zend, so wherever you have your Foundation Sass setup is where you are going to put these. Just like the docs say, copy the .scss files over to their appropriate folder, copy the entire new fonts directory over to the Foundation folder, at the same directory level (right there next to Sass and Stylesheets, etc).
Note: one reason why such a simple step may be confusing for some is because the Zurb documentation uses the term "merging" instead of "adding" the files. Only one file is in fact merged: _settings.scss
2) So whats up with the _settings.scss file? Open it up and check it out! It's just a mixin for the fonts. Take that code and add it near the top of your existing _settings.scss folder. It did not work for me when added toward the bottom.
3) That snip of CSS from the Zurb documentation page needs to be added at the top of your app.scss file. I put it just under all of my #import declarations.
4) Make sure that Compass is on and you have it watching your Foundation folder! Yow.
Ok, I've done my good deed for the day.

Answer 4

No need to over complicate this. What I did:
download icons
move the downloaded folder "foundation-icons" into your css folder
put the following line into the <head> section of your html <link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />
Then put in an up-arrow (or other icon) anywhere in the <body> of your html with <i class="fi-up-arrow"></i>