Acabei de fazer minha aplicação usar as fontes do , é bem simples mas não tão óbvio se você seguir o
They say it is simple like adding a bit of code, of course you need to make some changes.
I won't work.
I made some tests, read some stackoverflow answers and nothing...
Just to make sure the problem wasn't with assets pipeline I printed this in my console:
p Rails.application.config.assets.paths
Guess what. My fonts path was there.
/app/assets/fonts so I was sure there problem was my CSS
That's when I checked the downloaded file from Zurb and the one from the page and notice the difference.
See? There are some classes references to each icon so it's not just adding those i tags and you're done.
In case you need a CSS with all fonts, I have a gist for you
Be happy!
This was helpful, thanks!
ReplyDeleteHi my friend.
DeleteGlad it helped!
Daniel,
ReplyDeleteHave you ever run into a situation including the foundicons (I've downloaded Foundicons 2 if that makes a difference) where each time you try to pull out the appropriate font-icons it merely shows an empty-non-filled box, or the letters 'fl' (i believe it's attempting to use it like an icon despite it looking like text)? No matter what icon I try to use those are the only two "icons" displayed. It's quite frustrating. Any suggestions to fix this?
Though for others, I have changed the mixins a little to account for the multiple fonts that come with the entire foundicons sets (this might help others setup multi-font use easier):
[code]
@mixin default-face($fName, $fFile) {
@font-face {
font-family: $fName;
src: url('#{$fFile}.eot');
src: url('#{$fFile}.eot?#iefix') format('embedded-opentype'),
url('#{$fFile}.woff') format('woff'),
url('#{$fFile}.ttf') format('truetype'),
url('#{$fFile}.svg##{$fName}') format('svg');
font-weight: normal;
font-style: normal;
}
/* global foundicon styles */
[class*="#{$classPrefix}"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
}
[class*="#{$classPrefix}"]:before {
font-family: $fName;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
}
}
@mixin secondary-face($fName, $fFile, $preClass) {
@font-face {
font-family: $fName;
src: url('#{$fFile}.eot');
src: url('#{$fFile}.eot?#iefix') format('embedded-opentype'),
url('#{$fFile}.woff') format('woff'),
url('#{$fFile}.ttf') format('truetype'),
url('#{$fFile}.svg##{$fName}') format('svg');
font-weight: normal;
font-style: normal;
}
[class*="#{$preClass} #{$classPrefix}"]:before {
font-family: $fName !important;
}
}
Example Use:
@include default-face("GeneralFoundicons", "../font/general_foundicons");
@include secondary-face("SocialFoundicons", "../font/social_foundicons", "social");
@include secondary-face("EnclosedGeneralFoundicons", "../font/general_enclosed_foundicons", "enclosed");
/* add appropriate i-class or ie-class @include calls for the icons you want loaded */
[/code]
Now specifying an i tag with the class: "social foundicons-twitter" should work as long as the @include i-class("twitter", 004); is called in SASS before your CSS is generated.
Hey Scott, I had a problem like that and it was related with my path, have you checked that?
Deletesuperb!!!! thanks!! it worked for me.
ReplyDeleteIt was showing in fire bug that the path to fonts folder is not getting.
I just changed it to public directory, now it works like a charm.