Home/ Questions/Q 8180407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T00:12:27+00:00

I don’t know what’s wrong. It seems like I’m doing this right. I’m trying

  • 0

I don’t know what’s wrong. It seems like I’m doing this right. I’m trying to use Font Awesome in my application but the font doesn’t appear. I have a folder called fonts and in my application.rb included the line: 

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

and than instead of having the 2 css files that come with Font-Awesome (CHANGED SEE BELOW) ( didn’t need the IE7 one) I just put the main css inside of my application.css. Than I change the urls to detect the font files. 

@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;
}

I turned off the server and restarted after each change to the code but still no good. What am I missing?

UPDATE:

I’m not using SASS or LESS. Maybe the @font-face is the issue? I never seen this type of code use before.

UPDATE

I’m now using the font-awesome.css file. But its not showing up in my source code.

<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>

FULL ANSWER

This is how you can get it Font-Awesome working with inserting it normally.

QUOTE from: 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You really need to put that code into a css.scss file then include it in the application.css (you will need the css.scss to use the asset_paths)

    UPDATE: You will need to change your *= font-awesome to *= require font-awesome and also rename font-awesome.css to font-awesome.css.scss

    • 0