fontello的圖標字體與Meteor js不兼容

我已經從fontello下載了一個自定義的圖標字體，並打算在我的流星應用中使用它。我嘗試了下載的軟件包附帶的演示，並且字體顯示正常。這裏是我的CSS：fontello的圖標字體與Meteor js不兼容

@font-face { 
font-family: 'fontello'; 
src: url('fonts/fontello.eot?98991264'); 
src: url('fonts/fontello.eot?98991264#iefix') format('embedded-opentype'), 
    url('fonts/fontello.woff?98991264') format('woff'), 
    url('fonts/fontello.ttf?98991264') format('truetype'), 
    url('fonts/fontello.svg?98991264#fontello') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 

[class^="icon-"]:before, [class*=" icon-"]:before { 
font-family: "fontello"; 
font-style: normal; 
font-weight: normal; 
speak: none; 
display: inline-block; 
text-decoration: inherit; 
width: 1em; 
margin-right: .2em; 
text-align: center; 

/* For safety - reset parent styles, that can break glyph codes*/ 
font-variant: normal; 
text-transform: none; 

/* fix buttons height, for twitter bootstrap */ 
line-height: 1em; 

} 

.icon-twitter:before { content: '\e805'; } /* '' */ 
.icon-github-circled:before { content: '\e804'; } /* '' */ 
.icon-pencil:before { content: '\e801'; } /* '' */ 
.icon-cancel:before { content: '\e802'; } /* '' */ 
.icon-chat:before { content: '\e800'; } /* '' */

我的文件夾結構，像這樣/client/css/styles.css和字體/client/css/fonts/

在我的HTML我已經加入此標記<i class="icon-twitter"></i>，不幸的是我看到的，當我查看網頁，這是所有我看到 enter image description here 任何幫助將是偉大的。由於

來源

2013-06-05 Sam Mason

如果要引用your.domain.com/fonts/font_name.x的字體，則應將fonts目錄移動到標有public的目錄中。然後您可以使用路徑/fonts/font_name.x訪問它們。

看看非官方流星常見問題在這裏找到：https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files

公共/＃< - 靜態文件，如圖像，是直接服務。

還是流星文檔直接：http://docs.meteor.com/#structuringyourapp

最後，流星服務器將提供的任何文件的公開目錄下，就像在Rails或者Django項目。這是圖片，favicon.ico，robots.txt和其他任何地方的。

來源

2013-06-05 11:28:02 fletch

嘗試使用絕對路徑：

@font-face { 
font-family: 'fontello'; 
src: url('/client/css/fonts/fontello.eot?98991264'); 
src: url('/client/css/fonts/fonts/fontello.eot?98991264#iefix') format('embedded-opentype'), 
    url('/client/css/fonts/fontello.woff?98991264') format('woff'), 
    url('/client/css/fonts/fontello.ttf?98991264') format('truetype'), 
    url('/client/css/fonts/fontello.svg?98991264#fontello') format('svg'); 
font-weight: normal; 
font-style: normal; 
}

此外，它可能會更好的/public字體存儲爲生產模式/client不會工作了，你會再次得到這些廣場&你可以使用/fonts/代替（要映射到/public/fonts）

來源

2013-06-05 11:27:10 Akshat

我有同樣的問題，我解決的方法是通過使用這些絕對路徑：

@font-face { 
    font-family: 'icomoon'; 
    src:url('/fonts/icomoon.eot'); 
    src:url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
     url('/fonts/icomoon.woff') format('woff'), 
     url('/fonts/icomoon.ttf') format('truetype'), 
     url('/fonts/icomoon.svg#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

直接在公共/ fonts /目錄中。我想MeteorJS足夠聰明地猜測路徑。

來源

2014-01-23 20:05:22 Gus

fontello的圖標字體與Meteor js不兼容

回答

相關問題