2012-07-03 17 views
6

मुझे नहीं पता कि क्या गलत है। ऐसा लगता है कि मैं यह सही कर रहा हूँ। मैं अपने आवेदन में Font Awesome का उपयोग करने की कोशिश कर रहा हूं लेकिन फ़ॉन्ट प्रकट नहीं होता है।रेल 3.1 में काम करने के लिए फ़ॉन्ट प्राप्त करना?

class Application < Rails::Application 
# Enable the asset pipeline 
config.assets.enabled = true 
# This line 
config.assets.paths << Rails.root.join("app", "assets", "fonts") 

और बदले 2 सीएसएस फ़ाइलें जो फ़ॉन्ट-बहुत बढ़िया साथ आते हैं होने के से (नीचे देखें परिवर्तित) (IE7 जरूरत नहीं थी: मैं एक फ़ोल्डर fonts को फोन किया और मेरी application.rb लाइन शामिल है एक) मैंने अपने मुख्य संदेश को application.css के अंदर रखा है। फ़ॉन्ट फ़ाइलों का पता लगाने के लिए मैं यूआरएल बदलता हूं।

@font-face { 
    font-family: "FontAwesome"; 
    src: url('<%= asset_path('fontawesome-webfont.eot') %>'); 
    src: url('<%= asset_path('fontawesome-webfont.woff') %>') format('woff'), 
    url('<%= asset_path('fontawesome-webfont.ttf') %>') format('truetype'), 
    url('<%= asset_path('fontawesome-webfont.svg#FontAwesome') %>') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

मैंने सर्वर बंद कर दिया और कोड में प्रत्येक बदलाव के बाद पुनरारंभ किया लेकिन अभी भी कोई अच्छा नहीं है। मैं क्या खो रहा हूँ?

अद्यतन:

मैं एस.ए.एस.एस. या उससे कम का उपयोग नहीं कर रहा हूँ। शायद @font-face मुद्दा है? मैंने इस प्रकार के कोड का उपयोग पहले कभी नहीं देखा था।

अद्यतन

मैं अब font-awesome.css फ़ाइल का उपयोग कर रहा हूँ। लेकिन यह मेरे स्रोत कोड में दिखाई नहीं दे रहा है।

<head> 
    <link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"> 
    <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css"> 
    <link href="/assets/chosen.css?body=1" media="screen" rel="stylesheet" type="text/css"> 
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script><style type="text/css"></style> 
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
    <script src="/assets/application.js?body=1" type="text/javascript"></script> 
    <script src="/assets/chosen.jquery.min.js?body=1" type="text/javascript"></script> 
</head> 

पूरा जवाब

इस तरह आप यह font-बहुत बढ़िया यह आम तौर पर डालने के साथ काम मिल सकता है।

से उद्धरण: https://gist.github.com/2251151

1. Download font-awesome from https://github.com/FortAwesome/Font-Awesome 

2. Put the font folder font folder in the app/assets. I renamed the folder from font to fonts to make it clearer 

3. Add config.assets.paths << "#{Rails.root}/app/assets/fonts" to config/application.rb. This is to include the apps/assets/fonts folder in the asset pipeline 

4. Put the font-awesome.css file in the app/assets/stylesheets folder 

5. The first part of the css should be: 

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('fontawesome-webfont.eot'); 
    src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fontawesome-webfont.woff') format('woff'), 
     url('fontawesome-webfont.ttf') format('truetype'), 
     url('fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), 
     url('fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

#--------------------------------------------------------------------------------------------- 

You should then be able to use: 

<div style="font-size: 24px;"> 
    <i class="icon-camera-retro"></i> icon-camera-retro 
</div> 
+0

एन का एक नमूना प्रदान करें टायर application.css फ़ाइल –

+1

आपको अपनी सीएसएस फ़ाइल में eruby भागों को पार्स करने के लिए **। erb ** एक्सटेंशन जोड़ने की आवश्यकता है। हालांकि .scss के लिए कोई ज़रूरत नहीं है। साथ ही, आप हमेशा /assets/application.css पर जा सकते हैं और देख सकते हैं कि रेल आपके सीएसएस डेटा को कैसे आउटपुट करते हैं – yoavmatchulsky

+1

'* = font-awesome' गलत है, मुझे लगता है। एक परीक्षण के रूप में, इसे हटाएं और बंद * */'से पहले' * = requ_tree' जोड़ें। देखें कि यह मदद करता है। – Zabba

उत्तर

4

आप वास्तव में एक css.scss फ़ाइल में है कि कोड रखना होगा तो application.css में शामिल (आप asset_paths उपयोग करने के लिए css.scss की आवश्यकता होगी)

अद्यतन: आप अपने *= font-awesome*= require font-awesome को बदल सकते हैं और भी नाम बदलना होगा font-awesome.cssfont-awesome.css.scss को

+0

तो मुझे एससीएसएस का उपयोग करना है? मैं नियमित 'सीएसएस' फ़ाइल का उपयोग नहीं कर सकता? साथ ही, मैंने सभी फ़ॉन्ट-विस्मयकारी फ़ाइलों को पुनरारंभ करने के लिए हटा दिया है और अब 'font-awesome.css' सामान्य फ़ाइल का उपयोग कर रहा हूं लेकिन ध्यान दें कि जब मैं इसे '' = requ_self' के साथ अपने 'application.css' के अंदर शामिल करता हूं यह मेरे पृष्ठों स्रोत कोड में नहीं दिखाता है। यानी यह ज्ञात नहीं है, यह एकमात्र फाइल है जो यह करता है। – LearningRoR

+0

मैंने ऊपर अपना कोड अपडेट किया। – LearningRoR

+0

ठीक है, अब तक इतना अच्छा है लेकिन आखिरी बात यह है कि मुझे यह त्रुटि नहीं आ रही है, मुझे अब मिल रहा है: 'अमान्य सीएसएस "... कमाल-वेबफॉन्ट": अपेक्षित ")", ".eot" था)% > '); "' – LearningRoR

संबंधित मुद्दे