I have a rails 4 app and am trying to use the font awesome icons in it (for social media login links).
I have:
/* application.css.css:
*= require_framework_and_overrides.css.scss
*= require_self
*= require_tree .
*/
/* framework_and_overrides.css.css: */
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
In my gemfile:
gem 'font-awesome-sass', '~> 4.4.0'
I am also using bootstrap sass.
In my view, I try:
<%= link_to content_tag(icon('facebook', class: 'facebookauth')) %>
It renders "<>>" with nothing in between.
I have also tried:
<%= link_to content_tag icon('facebook', class: 'facebookauth') %>
I get the same error.
When I try:
<%= link_to content_tag(fa_icon('facebook', class: 'facebookauth')) %>
<%= link_to content_tag fa_icon('facebook', class: 'facebookauth') %>
I get this error:
undefined method `fa_icon' for
Does anyone know how to use font-awesome in Rails?
A new attempt:
<%= link_to icon('google', id: 'googleauth'), user_omniauth_authorize_path(:google_oauth2) %>
<%= link_to icon('linkedin', id: 'linkedinauth'), user_omniauth_authorize_path(:linkedin) %>
<%= link_to icon('twitter', id: 'twitterauth'), user_omniauth_authorize_path(:twitter) %>
<% end %>
This works fine to make the links, but I'm trying to put styling on the icons.
I have defined a css div called :facebookauth.
When I change the above, to:
<%= link_to icon('facebook', id: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>
Or try:
<%= link_to icon('facebook', class: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>
The links disappear. I want to make the size bigger and use my color styles. How can I put CSS on these links?
The helper seems to just populate the content of the content_tag - you still need to provide an element.
From the docs:
content_tag(:li, fa_icon('facebook', class: 'facebookauth'))
If you wanted to use the icon on its own, you'd be able to call fa_icon individually:
fa_icon "camera-retro"
# => <i class="fa fa-camera-retro"></i>
--
how to use the gem as it is intended
All the "web font" gems basically do the following:
Create a "web font" of many icons
Create a CSS file with classes, each class using a :before tag with content: of the web font
Each time you call one of the elements of the font (with class), you're really just prepending a :before with the appropriate font reference.
Therefore, in order to do this, you need a valid HTML element. The fa_icon helper seems to create a <i> tag -- <i class="fa fa-camera-retro"></i>. If you want to use it with content_tag, you need to therefore provide another element for Rails to wrap the content in.
--
Update
Make sure it works like this:
<%= link_to fa_icon("facebook", text: "Facebook", class: "facebookauth"), your_path %>
We recently used the gem in a project and here's the result:
Try this:
Pure HTML:
<a class="btn btn-lg btn-social btn-github" href="<%= content_tag_url %>">
<i class="fa fa-facebook"></i> Facebook
</a>
Add
include FontAwesome::Rails::IconHelper to app/helpers/application_helper.rb
Related
I am trying to load notifications in my app into a dropdown from my navbar (which is a bootstrap navbar). The partials that I am working with for each notification are similar to this one:
<%= link_to student_path(notification.notifiable), class: "dropdown-item notification-row #{"unread" if !notification.read_at?}" do %>
<%= image_tag notification.faculty.photo, class: "avatar", alt: "faculty-pic" %>
<div class="notification-message">
<%= notification.faculty.teacher_name %>
<%= notification.action %>
<%= notification.notifiable.first_name %>
<%= notification.notifiable.last_name %>
to you
</div>
<div class="notification-time"><%= time_ago_in_words(notification.created_at) %></div>
<% end %>
I am specifically attempting to keep the "notification-message" class at a width of 200 px as displayed in my css:
.notification-message {
width: 200px;
}
but my partials do not render accordingly...
I want the "notification-message" content to wrap within that width so that my notifications are consistent. I have tried adding both the word-wrap, and overflow-wrap attributes to my css, but they do not help (my partial is rendered just the same). Is this happening because of some sort of bootstrap style? Any other ideas??
I'm trying to style a simple Ruby on rails form with the Twitter Bootstrap css but I'm struggling to workout which bits of rails code goes into which part of the Bootstrap css for a form.
For example where would the following line fit into the Bootstrap css for a form? :
<%= f.text_field :company %>
Based on the examples in the Twitter Bootstrap documentation, I am assuming you are attempting to apply the form-control class to your input. If this is the case, you would do it like this.
<%= f.text_field :company, :class => "form-control" %>
See similar question: Using CSS to style Ruby objects in erb
<%= f.text_field :company %>
Actually, this code means "Create a markup input of type text, with the good name (ex: user[company]) so Rails can handle the parameter easily". No more no less.
Example Output:
<input type="text" name="user[company]">
Bootstrap will envelope then this object with a style provided by CSS. So
1- Ensure your css is loaded into your "application.css"
Usually, you'll need to add style for the form
<%= form_for #resource, html: { class: "form form-inlined" } do |f| %>
And also around your input text field:
<div class="form-group">
<%= f.label :company %>
<%= f.text_field :company, class: "form-input" %>
</div>
This is just an example, but you can see where to put the bootstrap class on each elements.
I'm working with ruby on rails and I"m not very familiar with the language. What I want to do is fairly straight forward. I have a language toggle bar which allows the user to choose the language with which they can view the site.
I want to underline the selected language when it is chosen. But I'm not sure how to add a class or a span so that I can just underline (bottom-border) one of the languages.
Here is my code:
<div class="language">
<% if #language == :fr %>
<%= link_to 'English', language_path(language: :en) %>
<span>|</span>
French
<% else %>
English |
<%= link_to 'French', language_path(language: :fr) %>
<% end %>
</div>
Can someone please help me? When I select the class 'Language' it underlines both the "English|French" entirely, when all I really want is to underline the language that is currently selected. So either or, not both.
Put the active language into its own span and style it there
<div class="language">
<% if #language == :fr %>
<%= link_to 'English', language_path(language: :en) %>
<span>|</span>
<span class="selected">French</span>
<% else %>
<span class="selected">English</span>
<span>|</span>
<%= link_to 'French', language_path(language: :fr) %>
<% end %>
</div>
CSS:
.language > .selected {
text-decoration: underline;
}
You might also need to style your generated anchor tags to have text-decoration: none;, since they are probably underlined by default (as is good practice anyhow). In any case, don't use border-bottom for this.
Having said all that, I think you need to make it as clear as possible that the currently unselected language is an anchor tag. When people see underline, they tend to assume the underlined thing is a link. Conversely, things with no underline that ARE links constitute surprising behavior.
I'm playing around with some of the input boxes for my rails project.
I'm a bit taken with the first example given here. I like the little '#' notch and could use that for a formatting prompt to our users.
Their code looks like this:
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Username">
</div>
If i put that into my rails view it works perfectly and looks great.
But my form setup is running with a form_for function, and I'm having difficutly getting the two to play nicely.
My rails html.erb code looks like this below:
<div class="row">
<div class="col-md-6 col-md-offset-4">
<%= form_for #request do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :user_id%>
<%= f.text_field :user_id%>
<%= f.submit "Begin my request", class: "btn btn-primary" %>
<% end %>
</div>
</div>
I've tried wrapping the two pieces of code together in various ways but to no effect!
General constants is that my rails code always comes out with hard rectangular edges (compared to the bootstrap smooth curves), I cannot get the input-group-addon to sit comfortably on the end of the input field, it variously rides above and below or sits awkwardly over the larger form block etc... so fail on my part. Anyone got any insight?
In terms of gems pertinent to bootstrap I'm using:
gem 'bootstrap-sass', '3.2.0.0'
gem 'sass-rails', '5.0.0.beta1'
The problem you are running into is form_for is using the rails FormBuilder to generate your form and the method text_field is translating to a specific piece of html. You can have it create a different piece of html by creating your own form builder. If you opt to use another gem like simple_form it gets even easier as you can just create additional types of fields. You can look over the documentation for that gem for more information.
class CustomFormBuilder < ActionView::Helpers::FormBuilder
def text_field_with_addon(name, addon, *args)
#template.content_tag(:div,
#template.content_tag(:span, addon, class: 'input-group-addon') +
#template.text_field(name, *args),
class: 'input-group')
end
end
Then use it like:
<%= form_for #request, builder: CustomFormBuilder do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :user_id%>
<%= f.text_field_with_addon :user_id, '#' %>
<%= f.submit "Begin my request", class: "btn btn-primary" %>
<% end %>
Ok. I can't figure this out. The problem is that #extend is not working in css. I have css:
#import "bootstrap";
.field_with_errors {
#extend .control-group;
#extend .error;
}
It doesn't highlight the fields that have div class .field_with_errors. I can't figure out why, it worked on other apps I made. If I write in CSS something like color: #f00; - this works. It just doesn't #extend for some reason. Any ideas?
Form:
<h1>Report</h1>
<div class="row">
<div class="span6 offset3">
<%= form_for(#problem) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :name, raw("Your name:") %>
<%= f.text_field :name %>
<%= f.label :email, raw("E-mail address (for confirmation):") %>
<%= f.text_field :email %>
<%= f.label :description, raw("Enter a description of the problem:") %>
<%= f.text_area :description %>
<%= f.submit "Submit", class: "btn btn-large btn-primary" %>
<% end %>
</div>
</div>
Probably a dumb question, I must've missed something. I just don't know what it is and would really like this to work like it did before. Any help appreciated!
Edit:
After looking at bootstrap-sass files, I realized that I am able to #extend classes that are in the files there (#extend .form-control works for instance). So it must be that .error and .control-group is not there!! Where it went I still can't figure out, unless they just changed it like a week ago. :/
As the comment of 'soup' points out, the problem is caused by installing Bootstrap 3 and then calling Bootstrap 2 class names. The class names have changed (have a look here). The correct code is:
.field_with_errors {
#extend .has-error;
}
And accordingly the error message has to be wrapped in (also look here):
div class="alert alert-danger"
So in your app\views\shared\_error_messages.html.erb-partial (you're propably reusing code from Michael Hartl's Rails Tutorial) change div class="alert alert-error" to div class="alert alert-danger". Because your code is so far off, I give you a version adapted for Bootstrap 3:
<h1>Report</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#problem) do |f| %>
<%= render 'shared/error_messages' %>
<div class="form-group">
<%= f.label :name, raw("Your name:") %>
<%= f.text_field :name, class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :email, raw("E-mail address (for confirmation):") %>
<%= f.text_field :email, class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :description, raw("Enter a description of the problem:") %>
<%= f.text_area :description, class: 'form-control' %>
</div>
<%= f.submit "Submit", class: "btn btn-lg btn-primary" %>
<% end %>
</div>
</div>
In case anyone lands on this (like I did) because it isn't working with LESS, here's what I had to do:
.field_with_errors .form-control {
&:extend(.has-error .form-control);
}
.field_with_errors .form-control:focus {
&:extend(.has-error .form-control:focus);
}
When I tried it with:
.field_with_errors {
&:extend(.has-error);
}
which is the equivalent of the recommended way I found to use the bootstrap 3 style for errors, LESS wasn't doing anything. It may have something to do with the fact that the selectors in bootstrap 3 that mention has-error always have it combined with something else, e.g.:
.has-error .form-control {
Anyway - the above solution worked for me so hopefully it helps someone else.
I figured it out. This has to do with Twitter-Bootstrap, which has a class .alert in it. That is the class responsible for showing errors with correct styling.
Bootstrap installs who knows where and is easiest to access through Developer Tools in browser (that sucks). I couldn't find where the source of the gem is located (it pointed me to folder that is not a folder). So I copied twitter css files from github directly into my app -> vendor/assets/stylesheets . Now I can deal with the problem.
I changed the style of .alert class inside one of bootstrap files (_alerts.scss) and added extra classes in my custom.css.scss file to make border around inputs red on errors.
Somehow this whole thing worked better in previous apps I made, I think this has to do with changes they made to bootstrap and possibly the fact that I messed with bootstrap's original design (like a full-width header).
The biggest thing that led me to solution was that the class is .alert and not .error like I thought. Also big thanks to browser developer tools, I couldn't find my files without you.
Edit:
Here's the download instructions on Bootstrap to get the files:
http://getbootstrap.com/getting-started/#download
Upgrading your code as per 3.x should work
.field_with_errors {
#extend .has-error;
}
This error causes because in application.scss there is the folowing line
*= require_tree .
and it is placed before the #import "bootstrap".
So, _custom.scss has been included before Bootstrap.
The easiest way to fix it -- what worked for me -- is to add !optional to both classes:
.field_with_errors {
#extend .control-group !optional;
#extend .error !optional;
}
OK, after chasing down this issue for a couple days, I figured out what the problem is.
You need to include bootstrap at the top your custom.css.scss file.
#import 'bootstrap';
My guess would be that this includes all the classes in the custom file so that you can reference them later. I assume if you use some bootstrap gem it will make them globally available, but if you do it vanilla like I did then you need to use the code above.