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/
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")
Related
Background
I have MaterialFX as an external dependency for my JavaFx project. The project tries to recreate the demo shown in the MaterialFX project. My project uses Gradle (build script in Kotlin).
The demo uses custom fonts provided in its resource path in a javaFxStylesheet.css file to style e.g. the JavaFX Labels:
/*javaFxStylesheet.css*/
#import '../fonts/Fonts.css';
.header {
-fx-font-family: <fontname>`
}
where Fonts.css has multiple entries like
/*Fonts.css*/
#font-face {
font-family: 'Comfortaa SemiBold';
font-weight: 600px;
font-style: normal;
font-display: swap;
src: url('../fonts/Comfortaa/Comfortaa-SemiBold.ttf') format('truetype');
}
Problem
The MaterialFX dependency I pull into my project has the used fonts in a separate folder but how to I use them in my project. As is visible from the demo Fonts.css (which I would like to simply copy into my project), the paths to the fonts e.g. url('../fonts/Comfortaa/Comfortaa-SemiBold.ttf') are specified relative the resources path.
Now, if I want to use the same fonts in my project without changing all the paths, I guess I need to
Copy the fonts-Folder manually from the externally pulled materialfx.jar into my own project resources
Have Gradle automatically do this
So I imagine I need something like the following in my build.gradle:
copy from external library 'materialfx-11.13.9.jar' the folder 'io/github/palexdev/materialfx/font'
into my own projects "src/main/resources"
Note - there seems to be a smiliar issue but I can't make it work as I have no clue if it even aims at the same thing I'm trying to acchieve.
I am trying (in vain) to get fonts working locally.
I have installed https://github.com/components/font-awesome and there is a line at the bottom of the page that states:
Here is the important part, the default font folder is on different path with the compiled bower file. We need to move the font from default font folder to the compiled bower folder (In the example vendor is the compiled folder).
Now I am using grunt, not gulp and I am also using the sass.
So, in my sass I have done this:
#import "../../bower_components/components-font-awesome/scss/fa-brands";
#import "../../bower_components/components-font-awesome/scss/fa-regular";
#import "../../bower_components/components-font-awesome/scss/fontawesome";
Which pulls in the correct fa fonts, etc.
Then following that text above I created a rule in my gruntfile that does this:
fonts: {
expand: true,
cwd: 'bower_components/components-font-awesome/webfonts/',
src: '*',
dest: '<%= yeoman.app %>/fonts'
}
But when I try to load my site using grunt serve -o I get this message:
Failed to decode downloaded font: http://localhost:9000/webfonts/fa-regular-400.woff2
So I can see it is looking in a different directory, so first of all I just added this to my sass:
$fa-font-path: "/fonts";
But that didn't work either.
So then I decided to change the copy rule to actually copy to /webfonts and still no icons were downloaded.
I have read some posts (with people with similar issues) and they have said the path was relative.
So I decided to copy the fonts and directories to everywhere they might need to be:
/webfonts
/assets/webfonts
/styles/webfonts
/fonts
Even doing that, no fonts are loaded.
Surely someone knows how to fix this?
I have to use a custom font Jameel Noori Nastaleeq in a rails 5 app. I have never worked with assets pipeline in rails before. Here are some of the steps I have taken:
create fonts folder in app/assets, and place the extracted ttf font file in it
add config.assets.paths << Rails.root.join("app", "assets", "fonts") in config/application.rb
add the following in app/assets/stylesheets/couplets.scss:
#font-face {
font-family: 'Jameel Noori Nastaleeq';
src:asset-url('JameelNooriNastaleeq.ttf') format("truetype");
}
Although there is no error/warnings, the above steps have no effect. Am I missing something.
I have already seen similar questions Custom Font not working in Rails Asset Pipeline Integrating #font-face files into rails asset pipeline
but their answers were not helpful.
Complete code in my github repo
I had generated the resources using scaffold. Adding desired font-family in app/assets/stylesheets/scaffold.scss fixed the problem. I have updated the github repo.
Situation
Use bower In .bowerrc
In bowerrc set directory vendor/assets/bower_components
In config application.rb I typed config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Install gallery plugin called «fotorama», do it by bower
All files of plugin «fotorama» now storage in this directory "/vendor/assets/bower_components/fotorama"
In manifest css file application.css I type *= require fotorama/fotorama.css
In layout file I typed <%= stylesheet_link_tag "application" %>
Starting server rails server — everything is ok. In source of generated page I see <link href="/assets/fotorama/fotorama.css?body=1" rel="stylesheet" />. This css file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}, and many other lines where uses url for file "fotorama.png", and it is ok, browser try to find this png file near the css file, and successfully do it.
Stop server, precompile all essets rake assets:precompile, and then run server in production environment rails server -e production
Problem
In production, all my css files concatenated, and in source of page it looks like this <link href="/assets/application-2d31fc33890d01b046194920367eb3d4.css" rel="stylesheet" />, and still this file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}. Now browser trying to find png file here http://localhost:3000/assets/fotorama.png, but it isn't here, it isn't anywhere, because, I don't know why, there is no "fotorama.png" in "public/assets" folder.
Questions
Why pictures didn't transport from "/vendor/assets/bower_components" to "public/assets"
Have you got an idea, what can I do to solve my problem? Important, that I don't want to change urls in css manually, programatically — ok.
Excuse me for my english, and thanks for everybody who going to help me.
Solution and answers
Only files from "app/assets" transports to "public/assets" by default. To transport images from "/vendor/assets" type in "application.rb" this code config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Task for gulp: if you see some changes in "bower.json", take all main files of bower components by npm moudle called "main-bower-files". Generate a manifest file with each css file with .erb extension, and save it "app/assets/stylesheets/bower_components_manifest.css"
This task continue: in every main css files, by npm module called "gulp-css-url-adjuster", add before every url <%= asset_path ' plus path to directory, and after ' %>. url("fotorama.png") >> url("<%= asset_path 'fotorama/fotorama.png' %>"). Add .erb extension and save.
In "app/assets/stylesheets/application.css" I add * require bower_components_manifest.
One of the other solutions, use gem "bower-rails". But I don't like it, because in some plugins in bower I need override some "main" files, and gem "bower-rails" can't do this, npm "main-bower-files" can. And I like to save my workflow for everything what I have done before start include my code to rails, gulp, bower.
I'm having trouble using #font-face with fonts located on my machine. My files aren't on a server yet. I'm trying to preview them offline, but they aren't loading.
Here is the code from the css file:
#font-face{
font-family:"chunk";
src: url('file:///C:/...Fonts/Chunkfive.otf');
}
div{
font-family:"chunk";
}
Has anyone had similar problems?
Include them in your site folder, and reference them as you do with images.
#pvenkat; if your font folder & css in same folder then just write this Fonts/Chunkfive.otf in your url path & if your css folder some other folder like in stylesheet folder then write ../Fonts/Chunkfive.otf in your path may be that's work for you.