Every now and then I dont even know where to start debugging anymore because i've tried so many things that i'm not sure what worked and what never even worked in the first place.
The problem: When i load a Froala text editor in my application, the editor loads fine, the content submitted through the editor even saves. But the toolbar icons (Font Awesome icons) all display as squares.
What I've tried:
The froala documentation says i should write all those "require"s in the application.css file so i tried changing my application.css.scss to application.css and it WORKS. But i have other sass files i need to import into my application file which is why i have it as application.css.scss
I installed Froala onto the project using the Froala Gem. The editor is initializing which means the require in require froala_editor.min.css is working. Shouldnt this mean my require font-awesome should be working and my icons in the toolbar should be displaying correctly?
I've also tried adding the Font Awesome cdn directly into the application layout but that didnt seem to change anything.
I've tried resetting the cache and using different browsers as well.
It's a very similar problem as this post but i think im doing everything i should be doing to load the font-awesome icons so i'm not sure where i'm going wrong!
Thank you for the help in advance and let me know if I can provide any additional information!
update: i am using froala v2 from this link, following these directions: https://www.froala.com/wysiwyg-editor/docs/framework-plugins/rails
application.css.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_self
*= require froala_editor.min.css
*= require froala_style.min.css
*= require font-awesome
*= require plugins/char_counter.min.css
*= require plugins/code_view.min.css
*= require plugins/colors.min.css
*= require plugins/emoticons.min.css
*= require plugins/file.min.css
*= require plugins/fullscreen.min.css
*= require plugins/image_manager.min.css
*= require plugins/image.min.css
*= require plugins/line_breaker.min.css
*= require plugins/quick_insert.min.css
*= require plugins/table.min.css
*= require plugins/video.min.css
*/
I traced the error back to css that i wrote to set the font-family of the <body> to a customized font-family. When i removed it, the squares started displaying as normal! I'm assuming this happens because the font-awesome icons dont know how to display the icons in any other font-family than the one it's created for?
If someone can give me a clear explanation that would be awesome but give this troubleshooting a try if you're experiencing any similar issues!
Related
I imported a font and it worked on my machine because I had the font installed and I didn't even notice that it wasn't being loaded from Google Fonts. It worked in production too, so there was nothing to tip me off that it wasn't being loaded in development until I had my brother open the site to test something for me. I've tried multiple different things to fix this and there's some odd behaviours. This is the top of my application.scss right now:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* Styles in this file should be added after the last require_* statement.
*
* It is generally better to create a new file per style scope.
*
*= require font-awesome
*= require_self
*= require_tree .
*/
#import "bootstrap/scss/bootstrap";
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght#200;400;600;900&display=swap');
If I move my google fonts #import to the absolute top of the file, above even the comment, it loads the font, but also completely breaks a lot of the page styling.
I noticed a difference between the production and development css when I looked. The production css had the google fonts #import before the font-awesome stuff, whereas in development, the #import came after the font-awesome stuff, so I tried removing font-awesome and the google fonts loaded completely fine. However I still need font-awesome, I can't just get rid of it.
I know the easiest solution would be to use the tag in the layout since I know that works, but I prefer to use the css and I thought it would be better if I knew what was going on regardless. I've looked for a while but I haven't managed to find anyone with a similar problem. Anyone have any clue what is going on?
I am trying to require "font-awesome.scss" in the application.css of my Rails 4 app like this:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require 'font-awesome.scss'
*= require_tree .
*= require_self
*/
'font-awesome.scss' imports a bunch of files that look like partials, with a preceding underscore. One of these partials (_variables.scss) defines a variable that I need to define as of the moment I get the following error message:
Sass::SyntaxError (Undefined variable: "$fa-css-prefix".
(in /Users/bla/rails_projects/Homepage/app/assets/stylesheets/_bordered-pulled.scss:4)):
app/assets/stylesheets/_bordered-pulled.scss:4
app/views/layouts/application.html.erb:35:in `_app_views_layouts_application_html_erb__3531690645719711557_70221015865520'
What am I doing wrong?
Just do this:
*= require font-awesome
No need to put the quotes or extension.
More docs on the subject here: http://guides.rubyonrails.org/asset_pipeline.html
you can use font awesome without the gem, just use their cdn.
This goes in your layout, application.html.erb
<head>
...
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
...
</head>
More info here: http://fortawesome.github.io/Font-Awesome/get-started/
Try checking how you are precompiling assets. Check initializers/assets.rb (or it may be environments/production.rb for you) to make sure you are precompiling assets in a friendly way, like this:
config.assets.precompile += ["*.js", "*.scss", "*.jpg", "*.png"]
I was having this same error when it was
config.assets.precompile += [/.*\.png/,/.*\.ico/,/.*\.jpg/,/.*\.js/,/.*\.scss/]
I have got some Bootstrap functionality up and running on my app. So far so good. I know that the 2 defaults colors for the navbar are black and white,using navbar-default and navbar-inverse. I am trying to add the navbar color change CSS to the assets/stlyesheets/application.css file, but not having any luck. the color im changing it to is green. ( an irrigation system website. Green for grass, yay)
this is what my application.css file currently looks like.
/*
* This is a manifest file that'll be compiled into application.css, which will include all the
files listed below
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets
/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*/
.navbar-default {
background-color: #33FF33;
border-color: #E7E7E7;
}
Create a new file under app/assets/stylesheets, add your custom styles to the file, then include it in application.css.scss.
#import custom_navbar.css.scss;
You will want to change application.css to application.css.scss and remove the comments entirely. You will then import the files you want using the #import directive.
Note that this somewhat breaks away from convention, but it might work for your purposes. You can read more about structuring SASS projects on the SASS blog.
If you are using the bootstrap-sass gem (you should), the right way to do this, is to set the bootstrap variables, in your application.css.scss, before including bootstrap:
$navbar-default-bg: #33FF33;
$navbar-default-border: #E7E7E7;
#import "bootstrap";
I'm trying to figure out how to correctly define a stylesheet (say...bootstrap_and_overrides.css.scss) to override all other stylesheets in my Ruby on Rails app. The thing is I want to leave all {wrap}bootstrap theme files I'm using intact so I can upgrade when updates come out. So all changes I may need to make should be done on this "overriding" css file.
Maybe something in application.css.scss?
*= require_self
*= require_tree .
*/
I've tried declaring this specific stylesheet after require_tree but nothing. I'm sure there are some concepts I'm not fully grasping. Any help is greatly appreciated.
I am not sure about using Rails specifically, but the definitions in the last stylesheet (added to the page last) will trump preceding styles.
You need to ensure that the override stylesheet contains equivalent css selectors to ensure the styles will be overridden.
I have a Ruby application, and here is my setup:
I have this HAML code:
.alert.alert-info
%p="This is the correct style."
The sidebar.css has this:
/*
* THIS IS THE MANIFEST FILE FOR THE LAYOUT: SIDEBAR
*= require_self
*= require bootstrap
*= require bootstrap-responsive
*= require bootstrap_overrides
*= require layout/buttons
*= require sidebar/base
*/
The web page renders the text "This is the correct style" but not the styling for it.
Here is the page with the styling documentation:
http://twitter.github.com/bootstrap/components.html#alerts
Any idea what I might be missing or need to set up still? The css styles are just not rendering.
Thanks!
Not sure if you use LESS or not, by I import Bootstrap like this:
#import "twitter/bootstrap/bootstrap";