Giter Club home page Giter Club logo

font-awesome-rails's Introduction

Note

For Font Awesome 5 or 6 support, please consider font-awesome-sass.


font-awesome-rails

Gem Version Build Status Gem Downloads

font-awesome-rails provides the Font-Awesome web fonts and stylesheets as a Rails engine for use with the asset pipeline.

Installation

Add this to your Gemfile:

gem "font-awesome-rails"

and run bundle install.

Usage

In your application.css, include the css file:

/*
 *= require font-awesome
 */

Then restart your webserver if it was previously running.

Congrats! You now have scalable vector icon support. Pick an icon and check out the FontAwesome Examples.

Sass Support

If you prefer SCSS, add this to your application.css.scss file:

@import "font-awesome";

If you use the Sass indented syntax, add this to your application.css.sass file:

@import font-awesome

Helpers

There are also some helpers (fa_icon and fa_stacked_icon) that make your views icontastic!

fa_icon "camera-retro"
# => <i class="fa fa-camera-retro"></i>

fa_icon "camera-retro", text: "Take a photo"
# => <i class="fa fa-camera-retro"></i> Take a photo

fa_icon "chevron-right", text: "Get started", right: true
# => Get started <i class="fa fa-chevron-right"></i>

fa_icon "quote-left 4x", class: "text-muted pull-left"
# => <i class="fa fa-quote-left fa-4x text-muted pull-left"></i>

content_tag(:li, fa_icon("check li", text: "Bulleted list item"))
# => <li><i class="fa fa-check fa-li"></i> Bulleted list item</li>
fa_stacked_icon "twitter", base: "square-o"
# => <span class="fa-stack">
# =>   <i class="fa fa-square-o fa-stack-2x"></i>
# =>   <i class="fa fa-twitter fa-stack-1x"></i>
# => </span>

fa_stacked_icon "dollar inverse", base: "circle", class: "fa-5x"
# => <span class="fa-stack fa-5x">
# =>   <i class="fa fa-circle fa-stack-2x"></i>
# =>   <i class="fa fa-dollar fa-inverse fa-stack-1x"></i>
# => </span>

fa_stacked_icon "terminal inverse", base: "square", class: "pull-right", text: "Hi!"
# => <span class="fa-stack pull-right">
# =>   <i class="fa fa-square fa-stack-2x"></i>
# =>   <i class="fa fa-terminal fa-inverse fa-stack-1x"></i>
# => </span> Hi!

Misc

Rails engines

When building a Rails engine that includes font-awesome-rails as a dependency, be sure to require "font-awesome-rails" somewhere during the initialization of your engine. Otherwise, Rails will not automatically pick up the load path of the font-awesome-rails assets and helpers (source 1, source 2, source 3).

Deploying to sub-folders

It is sometimes the case that deploying a Rails application to a production environment requires the application to be hosted at a sub-folder on the server. This may be the case, for example, if Apache HTTPD or Nginx is being used as a front-end proxy server, with Rails handling only requests that come in to a sub-folder such as http://example.com/myrailsapp. In this case, the FontAwesome gem (and other asset-serving engines) needs to know the sub-folder, otherwise you can experience a problem roughly described as "my app works fine in development, but fails when I deploy it".

To fix this, set the relative URL root for the application. In the environment file for the deployed version of the app, for example config/environments/production.rb, set the config option action_controller.relative_url_root:

MyApp::Application.configure do
  ...

  # set the relative root, because we're deploying to /myrailsapp
  config.action_controller.relative_url_root  = "/myrailsapp"

  ...
end

The default value of this variable is taken from ENV['RAILS_RELATIVE_URL_ROOT'], so configuring the environment to define RAILS_RELATIVE_URL_ROOT is an alternative strategy.

In addition you need to indicate the subfolder when you precompile the assets:

RAILS_ENV=production bundle exec rake assets:precompile RAILS_RELATIVE_URL_ROOT=/myrailsapp

Rails 3.2

Note: In Rails 3.2, make sure font-awesome-rails is outside the bundler asset group so that these helpers are automatically loaded in production environments.

Versioning

Versioning follows the core releases of Font-Awesome which follows Semantic Versioning 2.0 as defined at http://semver.org. We will do our best not to make any breaking changes until Font-Awesome core makes a major version bump.

License

font-awesome-rails's People

Contributors

adjam avatar anveo avatar asanghi avatar barrywoolgar avatar blairanderson avatar bokmann avatar clemensg avatar coderanger avatar cseelus avatar doits avatar eitoball avatar everplays avatar franco-cf avatar hectorcorrea avatar ijdickinson avatar jcody avatar kant avatar klenis avatar morenoh149 avatar mralexlau avatar nacengineer avatar rmm5t avatar sbonami avatar shekibobo avatar summerville avatar superscott avatar sysrich avatar topherfangio avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

font-awesome-rails's Issues

gem is causing encoding issues with other assets

After I upgraded font-awesome-rails, deploying my app with capistrano produces invalid javascripts for gem-unrelated scripts (my app's scripts, for example Sugar.JS). The assets are precompiled differently, making special characters (e.g. russian accented characters) in the javascripts being converted into question marks ( ? ). However, this only happens when I (cap) deploy from certain computers. I've tried on three, and it only happens on 2 of them. If I deploy the exact same code on the third machine, the assets precompile correctly and the problem does not appear. This is 100% reproducible for me (the one machine always deploys good javascripts, while the other two always deploy bad javascripts), but I cannot disclose code. It does not make too much sense since the asset precompilation happens on the server, but it does happen. Perhaps some environment is carried through ssh when doing cap deploy, and it somehow affects if this bug occurs or not. However this problem does not occur with version 3.2.1.3 of this gem.

This is the full and complete diff of my commit that introduced the problem for me (there are no other changes in the commit):

diff --git a/Gemfile.lock b/Gemfile.lock
index dfeb9c5..c4975f7 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -143,7 +143,7 @@ GEM
       multipart-post (~> 1.2.0)
     ffi (1.9.0)
     ffi (1.9.0-java)
-    font-awesome-rails (3.2.1.3)
+    font-awesome-rails (4.0.1.0)
       railties (>= 3.2, < 5.0)
     foreigner (1.5.0)
       activerecord (>= 3.0.0)

Before this commit, I can deploy from any of the computers and the javascripts will not have broken characters (ever).

I will admit I've looked at the diff between these two versions of the gem but I cannot see anything that could cause this - never the less, it is definitely happening.

Ruby version: jruby 1.7.4 (1.9.3p392)
Rails version: 4.0.0
OS: OS X ML and Mavericks (both tested)
Server OS: Ubuntu

Contains vendored everything

Version 3.1.1.2 of the gem contains vendored versions of a large number of gems. Looks like something went wrong while packaging?

Custom asset_path helper is not implemented

I can't seem to be able to compile my assets on Rails 4.0. I've tried putting the environment.context_class.class_eval do method in various files (config.ru, application.rb etc) but haven't had any joy. Can anyone help? Thanks

$ RAILS_ENV=production bundle exec rake assets:precompile --trace
...
Custom asset_path helper is not implemented
Extend your environment context with a custom method.

    environment.context_class.class_eval do
      def asset_path(path, options = {})
      end
    end

  (in /usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/bundler/gems/font-awesome-rails-a88a9a88f0df/app/assets/stylesheets/font-awesome.css.erb)/usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/sprockets-2.10.0/lib/sprockets/context.rb:241:in `asset_path'
/usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/sprockets-2.10.0/lib/sprockets/context.rb:261:in `font_path'
/usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/bundler/gems/font-awesome-rails-a88a9a88f0df/app/assets/stylesheets/font-awesome.css.erb:31:in `block in singleton class'
/usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/bundler/gems/font-awesome-rails-a88a9a88f0df/app/assets/stylesheets/font-awesome.css.erb:-5:in `instance_eval'
/usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/bundler/gems/font-awesome-rails-a88a9a88f0df/app/assets/stylesheets/font-awesome.css.erb:-5:in `singleton class'
/usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/bundler/gems/font-awesome-rails-a88a9a88f0df/app/assets/stylesheets/font-awesome.css.erb:-7:in `__tilt_70284069963480'
/usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/tilt-1.4.1/lib/tilt/template.rb:170:in `call'
/usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/tilt-1.4.1/lib/tilt/template.rb:170:in `evaluate'
/usr/local/var/rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'


Using font-awesome-rails (3.1.1.2) loads FontAwesome 3.1.0 css

I am using the latest version of the Gem, which seems to be loading 3.1.0 FontAwesome of the CSS - why would that be?

I also did notice that because I am using RailsAdmin (which requires the gem font-awesome-sass-rails to be included, that too is being included).

Could there be a clash there?

I am using Rails 3.2.13, and here is the full list of my Gems:

$ bundle
Using rake (10.0.4) 
Using i18n (0.6.1) 
Using multi_json (1.7.5) 
Using activesupport (3.2.13) 
Using builder (3.0.4) 
Using activemodel (3.2.13) 
Using erubis (2.7.0) 
Using journey (1.0.4) 
Using rack (1.4.5) 
Using rack-cache (1.2) 
Using rack-test (0.6.2) 
Using hike (1.2.2) 
Using tilt (1.4.1) 
Using sprockets (2.2.2) 
Using actionpack (3.2.13) 
Using mime-types (1.23) 
Using polyglot (0.3.3) 
Using treetop (1.4.12) 
Using mail (2.5.4) 
Using actionmailer (3.2.13) 
Using arel (3.0.2) 
Using tzinfo (0.3.37) 
Using activerecord (3.2.13) 
Using activeresource (3.2.13) 
Using addressable (2.3.4) 
Using annotate (2.6.0.beta1) from git://github.com/ctran/annotate_models.git (at master) 
Using bcrypt-ruby (3.0.1) 
Using coderay (1.0.9) 
Using better_errors (0.9.0) 
Using debug_inspector (0.0.2) 
Using binding_of_caller (0.7.1) 
Using sass (3.2.9) 
Using bootstrap-sass (2.3.1.3) 
Using rack-ssl (1.3.3) 
Using json (1.8.0) 
Using rdoc (3.12.2) 
Using thor (0.18.1) 
Using railties (3.2.13) 
Using bootstrap-wysihtml5-rails (0.3.1.20) 
Using uniform_notifier (1.2.0) 
Using bullet (4.6.0) 
Using callsite (0.0.11) 
Using cancan (1.6.10) 
Using nokogiri (1.5.9) 
Using xpath (2.0.0) 
Using capybara (2.1.0) 
Using carrierwave (0.8.0) 
Using coffee-script-source (1.6.2) 
Using execjs (1.4.0) 
Using coffee-script (2.2.0) 
Using coffee-rails (3.2.2) 
Using diff-lcs (1.2.4) 
Using gherkin (2.12.0) 
Using cucumber (1.3.2) 
Using bundler (1.3.2) 
Using rails (3.2.13) 
Using cucumber-rails (1.3.1) 
Using daemons (1.1.9) 
Using database_cleaner (1.0.1) 
Using orm_adapter (0.4.0) 
Using warden (1.2.1) 
Using devise (2.2.4) 
Using launchy (2.3.0) 
Using email_spec (1.4.0) 
Using eventmachine (1.0.3) 
Using excon (0.22.1) 
Using factory_girl (4.2.0) 
Using factory_girl_rails (4.2.1) 
Using figaro (0.6.4) 
Using formatador (0.2.4) 
Using net-ssh (2.6.7) 
Using net-scp (1.1.1) 
Using ruby-hmac (0.4.0) 
Using fog (1.11.1) 
Using font-awesome-rails (3.1.1.2) 
Using sass-rails (3.2.6) 
Using font-awesome-sass-rails (3.0.2.2) 
Using haml (4.0.3) 
Using jquery-rails (2.3.0) 
Using jquery-ui-rails (3.0.1) 
Using kaminari (0.14.1) 
Using letter_opener (1.1.1) 
Using libv8 (3.11.8.17) 
Using rack-contrib (1.1.0) 
Using meta_request (0.2.6) 
Using subexec (0.2.3) 
Using mini_magick (3.6.0) 
Using nested_form (0.3.2) 
Using newrelic_rpm (3.6.3.104) 
Using pg (0.15.1) 
Using quiet_assets (1.0.2) 
Using rack-mini-profiler (0.1.26) 
Using rack-pjax (0.7.0) 
Using remotipart (1.0.5) 
Using safe_yaml (0.9.2) 
Using rails_admin (0.4.8) 
Using ref (1.0.5) 
Using rmagick (2.13.2) 
Using rolify (3.2.0) 
Using rspec-core (2.13.1) 
Using rspec-expectations (2.13.0) 
Using rspec-mocks (2.13.1) 
Using rspec-rails (2.13.2) 
Using sendgrid (1.2.0) 
Using sextant (0.2.3) 
Using simple_form (2.1.0) 
Using therubyracer (0.11.4) 
Using thin (1.5.1) 
Using uglifier (2.1.1) 
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.

Btw, the actual result of this loading 3.1.0 of the CSS is that some icons, specifically those released in 3.1.1 are squares and not the actual icons. That is what caused me to look at the actual CSS being loaded and found it to be 3.1.0.

strange behaviour

-1
should it look like this?

$ bundle list | grep rails
  * coffee-rails (4.0.0)
  * compass-rails (1.0.3 1749c06)
  * factory_girl_rails (4.2.1)
  * font-awesome-rails (3.2.1.3)
  * jcrop-rails (1.0.3 77bce10)
  * jquery-fileupload-rails (0.4.1)
  * jquery-rails (3.0.4)
  * jquery-ui-rails (4.0.4)
  * less-rails (2.2.6)
  * rails (4.0.0)
  * rspec-rails (2.14.0)
  * sass-rails (4.0.0)
  * spork-rails (4.0.0 0dd45e5)
  * sprockets-rails (2.0.0)

File Not Found

I've installed exactly like you described but it didn't work

Sprockets::FileNotFound at /transactions
couldn't find file 'font-awesome' (in app/assets/stylesheets/application.css:13)

Some icons don't work

I've set up the new version of font-awesome with the 'fa fa-' classes and I get mixed results. While most icons work, some just don't display like 'fa fa-code'.
I see in the console that font-awesome.css is loaded, and the fa-code class gets matched. Same problem with fa-share-square and fa-thumbs-up. My guess is that the font itself is missing icons?

I updated to the last version of the gem (4.0.3.0 as of now). Could anybody tell me if I'm the only one getting this issue?

Conflict with rbenv-gemset

I'm using rbenv-gemset. It stuffs gems into a folder of your choosing when you run bundle install on a per-project basis. If I finish a project and delete the project folder, the gems go with it. It's nice.

Something about this gem seems to conflict with rbenv-gemset. As soon as I added it to the gemfile, I could no longer boot (stacktrace).

Steps to repro:

  1. brew update; brew install rbenv-gemset
  2. cd /path/to/project
  3. echo '.gems' > .rbenv-gemsets
  4. bundle install
  5. Try to run your Rails app
  6. Boom

How change prefix

How can I change icon prefix to avoid collision with other css classes?
Ps. great gem

add an icon helper

instead of using we need to use it in rails way:

<%= icon_tag("icon-camera-retro" %>

Version 3.2.1 is out

Hi, font-awesome v 3.2.1 is out and I cannot get some of the icons to work using the version from this repository.

Rails 4: Some icons and IE7 support is not work

Hello guys,

I'm installed this gem on Rails 4 application. But font-awesome 3.2 new icons, IE 7 support not work for me. When I open application.css there is a Font Awesome 3.2.1. Why? Am I miss something?

I'm using 3.2.1.1 version with SASS.
Thank you for advice :)

Rails 4 - file not found font-awsome

I am trying to include this on a new application I am developing and getting this error:
File to import not found or unreadable: font-awesome.

I included the gem:
gem "font-awesome-rails"

And I placed this on application.scss
@import "font-awesome";

Let me know if you have any ideas what could go wrong. Thanks!

[request] Please make element (<i> vs <span>) optional for icon helpers

Bootstrap no longer uses <i> tags for icons (thank god). Please move helpers over to use <span> tags or allow choice between <i> and <span>.

From Bootstrap 3 Examples:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

subsite

When using a subsite like localhost/mysite/ as the root app for rails, the gem tries to look for /localhost/assets instead of /localhost/mysite/

Helper not loading

I'm getting undefined method `fa_icon' after upgrading to version 4.0.3.0

I'm running rails 4.0.1 ruby 2.0.0

Icons appear as squares in production

Development looks great. On production server, icons appear as squares. I'm hoping it's something goofy that I'm missing.

After deployment, I run

bundle exec rake assets:precompile RAILS_ENV=production

on the production server. I can see that the helpers are calling for the fingerprinted application.css, and the fingerprinted font-awesome font files were generated, but the application.css is calling for un-fingerprinted font-awesome files... which are no where to be found.

Rails v4.0.0
font-awesome-rails v3.2.1.1

This app is being deployed to my own Mac OS X server 10.6 running apache and passenger (not sure that's relevant, but...)

Thanks for any help.

Some fonts don't show up

I've found that a couple of fonts don't show up. One in particular is anchor. Virtually all the others work, just not this one. Checked the code and you have it defined with what seems the right shortcode, bit odd.

Not work on Rails 4 beta 1 production asset pipeline

Here's the link for my test app: https://github.com/lecky/test_error

the asset_path seems not returning the correct url with the hash code. Here's what I got from the browser.

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

Add Less support

This gem is the more up-to-date one. It would be great if we could use @import on less.

Precompiled fonts not being sourced properly

I am precompiling my assets locally and deploying to Heroku. The precompiled font names look like this:

fontawesome-webfont-b88ec331ffbddc4c940f8cc15cc66ac8.woff

But the css file is looking for this instead:

fontawesome-webfont.woff

Do you have any recommendations as to how to fix this?

How to make it work with Rails 4?

Hi,

Am I doing something wrong? I have added the gem, but @import complaints:

File to import not found or unreadable: font-awesome.

In fact none of the gems that are using SASS work with Rails 4. So I just keep files in vendor/assets.

Rails 4, font-awesome not appearing in production environment

My app is running just fine in development mode, but when I cap deploy to my production environment (EC2, as it happens, though I'm not sure how significant that is), the app can't resolve the font-awesome font. I'm using pretty much as-installed rails environment configurations, and Capistrano recipes. Everything else in the app runs just fine, it's only the font-awesome font that can't be found.

I'm at a bit of a loss to know how to debug this, so any suggestions gratefully received. Relevant extracts from my Gemfile:

font-awesome-rails (4.0.3.0), 
rails (4.0.1)

Happy to provide any other details, but I don't which which ones are relevant and I don't want to waste folks' time by essentially posting the entire project!

Not Working on Heroku

Hey All:

I've been able to implement this locally with no problems at all, but for some reason when I push to heroku the symbols don't show up (they just show big square boxes). Furthermore, when I look at the console, I'm seeing 404 erros since none of the fontawesome fonts are found. Has anyone else had any luck with using this in Heroku production?

-Sunny

Seeing squares for just the newest FontAwesome Icons

Whenever I try to use any of the newest icons, I see just the squares.

E.g. this produces squares:

<%= content_tag(:a, fa_icon("windows", text: "Selling"), class: "btn dropdown-toggle", data: { toggle: "dropdown"}) %>

As does icon-collapse, etc.

$ bundle list | grep rails
  * bootstrap-wysihtml5-rails (0.3.1.23)
  * coffee-rails (3.2.2)
  * font-awesome-rails (3.2.1.3)
  * jquery-rails (3.0.4)
  * jquery-ui-rails (3.0.1)
  * rails (3.2.14)
  * rails_admin (0.4.9)
  * rspec-rails (2.14.0)
  * sass-rails (3.2.6)

Thoughts on what could be causing this?

Tests failing on Rails master (4.1)

Our tests are failing on rails master (future 4.1 release). Here's an example of a failed build.

/home/travis/.rvm/gems/ruby-1.9.3-p448/gems/sprockets-rails-2.0.1/lib/sprockets/rails/helper.rb:1:in `require': cannot load such file -- action_view (LoadError)
    from /home/travis/.rvm/gems/ruby-1.9.3-p448/gems/sprockets-rails-2.0.1/lib/sprockets/rails/helper.rb:1:in `<top (required)>'
    from /home/travis/.rvm/gems/ruby-1.9.3-p448/gems/sprockets-rails-2.0.1/lib/sprockets/railtie.rb:6:in `require'
    from /home/travis/.rvm/gems/ruby-1.9.3-p448/gems/sprockets-rails-2.0.1/lib/sprockets/railtie.rb:6:in `<top (required)>'
    from /home/travis/build/bokmann/font-awesome-rails/test/dummy/config/application.rb:4:in `require'
    from /home/travis/build/bokmann/font-awesome-rails/test/dummy/config/application.rb:4:in `<top (required)>'
    from /home/travis/build/bokmann/font-awesome-rails/test/dummy/config/environment.rb:2:in `require'
    from /home/travis/build/bokmann/font-awesome-rails/test/dummy/config/environment.rb:2:in `<top (required)>'
    from /home/travis/build/bokmann/font-awesome-rails/test/test_helper.rb:4:in `require'
    from /home/travis/build/bokmann/font-awesome-rails/test/test_helper.rb:4:in `<top (required)>'
    from /home/travis/build/bokmann/font-awesome-rails/test/font_awesome_rails_test.rb:1:in `require'
    from /home/travis/build/bokmann/font-awesome-rails/test/font_awesome_rails_test.rb:1:in `<top (required)>'
    from /home/travis/.rvm/gems/ruby-1.9.3-p448@global/gems/rake-10.1.0/lib/rake/rake_test_loader.rb:10:in `require'

Right now, we're allowing build failures on this segment of the build matrix, but it would be nice to get this cleaned up for future use while also keeping the rest of the build matrix green.

(Just logging this for now. I don't plan to work on this anytime soon, so if someone wants to help debug and resolve this, that would be awesome.)

Some Font-Awesome Icons appear as squares

I updated font-awesome-rails to 3.2.1.3 and ensured that Font Awesome 3.2.1 is loading in my browser. However, the some of the icons appear as rectangles (in particular, I'm finding icon-dropbox and icon-code-fork are not working). I tried following the suggestion here for setting the config.assets.precompile in development.rb, but my app is still loading squares:

http://stackoverflow.com/questions/12475253/twitter-bootstrap-rails-on-heroku-glyphicons-displayed-as-squares
config.assets.precompile += %w( *.css *.js *.woff *.eot *.svg *.ttf)

fonts not found: baseurl/font/fontawesome-webfont.woff

This is in Rails 3.2.1.

Failed to load resource: the server responded with a status of 500 (Internal Server Error) fontawesome-webfont.ttf
Failed to load resource: the server responded with a status of 500 (Internal Server Error) fontawesome-webfont.svgz
Failed to load resource: the server responded with a status of 500 (Internal Server Error) fontawesome-webfont.svg
Failed to load resource: the server responded with a status of 500 (Internal Server Error) fontawesome-webfont.woff

Include SASS files

Please include Sass files. There are no (more?) dependencies on Compass.

undefined method `fa_icon' for #...

Hi, i'm using the font-awesome-rails in my Rails Engine and show this error when i try to use the fa_icon helper in my layout: "undefined method `fa_icon' for #<#Class:0x00000102dff310:0x00000102a97b00>".
Rails Version: 4.0.4

Gentler upgrading, please

FA's naming convention has changed a bit with 4.x.
resize-horizontal has changed to fa-arrows-h.
http://fortawesome.github.io/Font-Awesome/whats-new/

I updated the gem and now using resize-horizontal 'works', where works means does not blow up and does not display anything.

It would be super nice if the gem did the mapping to the new name and yelled at me in console that I need to change the reference.

icons not styled correctly and not appearing in production

I'm having issues with icons being styled properly in production using Heroku. You can see a full description of the issue here:

http://stackoverflow.com/questions/19581357/font-awesome-rails-icon-formatting-incorrect-on-heroku

When I run my app locally, the icons are colored correctly. But when I push to production, the icon styling is gone, and one of the icons is not appearing. When I inspect the icons, it seems like the color of the icons is defined, but it isn't being rendered correctly on the page (all icons are black).

Bootstrap 2.1 .icon-white and .active .nav shows default gif background

To fix this I added this style to my project.

.icon-white, .nav > .active > a > [class^="icon-"], .nav > .active > a > [class_=" icon-"], .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:hover > [class_=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class*=" icon-"] {
background: none;
}

Assets are not found in production when using a context/subpath

I have a webapp running under a context (subpath) i.e. /xyz in production.

The font-awesome fonts are requested as /assets/... instead of /xyz/assets/... which results in a 404 and no icons displayed.

Remarks:

  • All other assets including bootstrap are requested correctly.
  • I have used font-awesome-rails in other applications which run in the root context /. Other wise the setup is very similar. Those applications work fine.

Rails 3.2 + Sprockets Backport Problems?

Reported by @adelsmee in the thread of #11:

Hi, we are running rails 4 sprockets in a rails 3 application. See here:
http://blog.logdown.com/posts/171593-using-rails-4-asset-pipeline-on-rails-3-for-faster-deploy

It's included in this css.sass file
vendor.css.sass

//= require jquery/dialog.sass
//= require jquery/jquery.contextMenu.css
//= require leaflet/leaflet.css
//= require leaflet/zoomslider.css
//= require font-awesome
$bundle list | grep 'rails|sprockets'
coffee-rails (3.2.2)
coffee-rails-source-maps (1.4.0)
compass-rails (1.1.2 67779b4)
cucumber-rails (1.4.0)
font-awesome-rails (4.0.3.1)
jquery-rails (3.0.4)
lp_on_rails (0.2.0 d784ff5)
rails (3.2.16)
rspec-rails (2.99.0.beta1)
sass-rails (4.0.1 8e23667)
sprockets (2.2.2.backport2)
sprockets-rails (2.0.1 7f6d8d7)

We're getting the following in the browser:

couldn't find file 'font-awesome'
/Users/dev/.bundle/ruby/1.9.1/gems/sprockets-2.2.2.backport2/lib/sprockets/context.rb:106:in `resolve'

any suggestions on what we can do?

Paths and SCSS

Not sure if you have really compared the scss file and the css file, but they are nearly the same.

Compare them using this online tool http://www.tareeinternet.com/scripts/comparison-tool/ and you'll find that compass/css3/font-face is imported just to create a different format for @include font-face, but it only looses 121 characters. Also uses *& in a few places as well.

Since sass can contain css code, all you really have to do is append .scss to the filename and set a variable for the font path if you want.

File path in CSS with asset pipeline can be just the filename. It doesn't require any directory structure. url('fontawesome-webfont.eot') is acceptable.

0.2.1 Not Using Latest Icons

With the release of Font-Awesome 2.0, I expected font-awesome-rails to use the latest set of font files, however, it appears that it is still using an earlier version as none of the 70 new icons are available. Just to check, I downloaded the most recent version and did a "diff" on the font files (found in /usr/local/lib/ruby/gems/1.9.1/gems/font-awesome-rails-0.2.1/vendor/assets/fonts) and there are many differences (especially in the svg).

I can easily download and replace these files, but this seems like a definite bug. Can anyone else confirm this issue?

Font Awesome icons don't show up

I'm experimenting with Font Awesome in my rails app. I added:

gem 'font-awesome-rails'

to my Gemfile and ran 'bundle install'. My Gemfile.lock was updated appropriately.

I also added

*= require font-awesome

between the /* and */ directives in my application.css file in rails_root/app/assets/stylesheets.

And I restarted my development server.

In my app, I have a bootstrap button that worked locally using the bootstrap-sass gem. I replaced the tag with the following:

<i class="fa fa-pencil-square-o fa-lg"></i> within the <a></a> tags for my button.

The button appears reduced in size with no icon (and no white rectangle).

Do I need to install the font-awesome directory, or take any other actions?

Any help or suggestions would be greatly appreciated.

Thanks,

Dean

image

In the image, the left-most button should have an 'edit' icon. The other buttons are using glyphicons.

File to import not found or unreadable: font-awesome.

Hello,

I'm beginning with rails bootstrap and font-awsome. I've installed font-awesome-rails as mentionned, but I don't understand one thing : Am I supposed to have source files somewhere ?

My SCSS file contains :

@import "compass_twitter_bootstrap";
@import "font-awesome";

So I suppose I should have a _font-awesome.scss in the same folder for the @import, but I've nothing and then when compass compiles my style.scss I get an error : File to import not found or unreadable: font-awesome.

There is no _compass_twitter_bootstrap.scss neither but I don't get any error (except glyphicons-halflings.png not found). How does this work ?

Bundle list :

  • compass (0.12.2)
  • compass_twitter_bootstrap (2.3.1)
  • font-awesome-rails (4.0.3.0)
  • more...

My Gemfile :

gem 'compass_twitter_bootstrap'
gem 'font-awesome-rails'

Tthe bundle install returns this :

Using rake (10.1.0)
Using i18n (0.6.9)
Using minitest (4.7.5)
Using multi_json (1.8.2)
Using atomic (1.1.14)
Using thread_safe (0.1.3)
Using tzinfo (0.3.38)
Using activesupport (4.0.2)
Using builder (3.1.4)
Using erubis (2.7.0)
Using rack (1.5.2)
Using rack-test (0.6.2)
Using actionpack (4.0.2)
Using chunky_png (1.2.9)
Using fssm (0.2.10)
Using sass (3.2.12)
Using compass (0.12.2)
Using compass_twitter_bootstrap (2.3.1)
Using thor (0.18.1)
Using railties (4.0.2)
Using font-awesome-rails (4.0.3.0)
Using bundler (1.3.5)

And the config.rb :

http_path = "/"
css_dir = "wp-content/themes/rgs/css"
sass_dir = "wp-content/themes/rgs/css_sass"
images_dir = "wp-content/themes/rgs/deco"
javascripts_dir = "wp-content/themes/rgs/js"
cache_dir = "wp-content/themes/rgs/css_sass/cache"

Thx for your help.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.