2

I'm trying to figure out how to adapt a wrap bootstrap theme for use in Rails 4.

The theme uses simple-line-icons. I've tried to move those files to a font folder in my app/assets folder as well as to the css file in my vendor/assets/css folder and the js folder in my vendor/assets/javascript folder.

I don't understand how to rewrite paths in the css so as to reference the assets in a way that will get rails to read them.

For example, one of the css files includes the following:

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

I understand that the url(../.. part is a problem for rails. What I can't figure out is how to solve it.

I have rails-12factor gem installed in my production environment. I've tried a million variations (shown in the rails guides), but I can't find anything that works.

Can anyone see what to do?

This article suggests not to include the 'fonts' folder in referencing vendor assets font files. https://gist.github.com/iamatypeofwalrus/6467148

I've tried including and excluding it but neither way works.

This article suggests that vendor file is not capable of storing fonts without amending the initialiser. I tried that but it doesnt work either. Using fonts with Rails asset pipeline

Rails.application.config.assets.paths
 => ["/Users/cf3/app/assets/images", "/Users/cf3/app/assets/javascripts", "/Users/cf3/app/assets/stylesheets", "/Users/cf3/vendor/assets/fonts", "/Users/cf3/vendor/assets/javascripts", "/Users/cf3/vendor/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/underscore-rails-1.8.3/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/gmaps4rails-2.1.2/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/images", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chartkick-1.4.1/app/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/formtastic-2.2.1/app/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/images", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/dependent-fields-rails-0.4.2/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/cocoon-1.2.6/app/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.0.5/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/coffee-rails-4.1.0/lib/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/momentjs-rails-eda1b74512db/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/stylesheets", "Rails/vendor/assets/fonts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/fonts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/images", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/fonts"]

HEROKU

I've now found this post, that suggests that for heroku compliance in production, I need to replace everything with asset path helpers and rename the files to add .erb to images and css and .coffee to js. Before I do this, can someone please confirm this is actually required, and how I would go about changing the above css file to comply with heroku requirements.

http://joanswork.com/wrapbootstrap-theme-to-rails/

Community
  • 1
  • 1
Mel
  • 2,481
  • 26
  • 113
  • 273
  • Put these files to app/assets directory and you can access them with path `src: url("/assets/Simple-Line-Icons.eot");` – Muhammad Ali Mar 28 '16 at 04:26
  • No, there are vendor css files and vendor js files, so i need to keep them together. I've tried vendor/assets/fonts but it isn't working – Mel Mar 28 '16 at 04:35

1 Answers1

6

Actually any sub-directory added to assets directory is auto added to the load paths. Files in those directories can be accessed as normal asset files.

If you have

vendor/assets/fonts/Simple-Line-Icons.eot

then vendor/assets/fonts/ should be added to load paths.

Then you can add all font files to your css files with path : font/file_name

Remember to restart your server after this as load paths will reload after restarting the server.

You can see the list of load paths through rails console by following command :

Rails.application.config.assets.paths

You can add new load paths by following command :

config.assets.paths << Rails.root.join("vendor", "assets", "fonts")
OR to autoload : config.autoload_paths << Rails.root.join("vendor", "assets", "fonts")
Muhammad Ali
  • 2,173
  • 15
  • 20
  • Neither vendor/assets/fonts/Simple-Line-Icons nor vendor/assets/Simple-Line-Icons works. I don't know what you mean about font/file_name. The example above shows how it is used in the css files (with src url). My console inspector shows 404 errors both ways – Mel Mar 28 '16 at 05:00
  • Run this `Rails.application.config.assets.paths` in your rails console and paste the output here. – Muhammad Ali Mar 28 '16 at 05:08
  • `src: url("/assets/Simple-Line-Icons.eot");` should work! – Muhammad Ali Mar 28 '16 at 05:17
  • copied and added above . – Mel Mar 28 '16 at 05:17
  • I've got it in vendor assets fonts folders – Mel Mar 28 '16 at 05:18
  • http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline?rq=1 – Muhammad Ali Mar 28 '16 at 05:23
  • Yes - that is the post i copied in my question above. I've tried its suggestions. It doesnt work – Mel Mar 28 '16 at 05:25
  • you added this `config.autoload_paths << Rails.root.join("vendor", "assets", "fonts")` to your application.rb and restarted the server ? – Muhammad Ali Mar 28 '16 at 05:27
  • For heroku precompile assets on local and push them to heroku. `rake assets:precompile RAILS_ENV=production` – Muhammad Ali Mar 28 '16 at 05:42
  • I've tried that at least 10 times. It doesnt work. In any event i use rails 12 factor gem which is supposed to replace the need for that – Mel Mar 28 '16 at 05:49