Skip to content

Commit dfc45d2

Browse files
seyhunakseyhunak
committed
Merge pull request seyhunak#608 from alepee/master
README was outdated since 2.2.7 about FontAwesome integration
2 parents 61c14a7 + 24a76d1 commit dfc45d2

File tree

1 file changed

+152
-117
lines changed

1 file changed

+152
-117
lines changed

‎README.md‎

Lines changed: 152 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -166,9 +166,11 @@ To use individual components from bootstrap, your bootstrap_and_overrides.less c
166166
If you'd like to alter Bootstrap's own variables, or define your LESS
167167
styles inheriting Bootstrap's mixins, you can do so inside bootstrap_and_overrides.css.less:
168168

169+
169170
```css
170171
@linkColor: #ff0000;
171172
```
173+
172174
### SASS
173175

174176
If you are using SASS to compile your application.css (e.g. your manifest file is application.css.sass or application.css.scss) you may get this:
@@ -184,11 +186,44 @@ If this is the case, you **must** use @import instead of `*=` in your manifest f
184186
### Icons
185187

186188
By default, this gem overrides standard Bootstraps's Glyphicons with Font Awesome (http://fortawesome.github.com/Font-Awesome/).
187-
If you would like to restore the default Glyphicons, inside the _bootstrap_and_overrides.css.less_ remove the FontAwesome declaration and uncomment the line:
189+
190+
This should appear inside _bootstrap_and_overrides *(based on you twitter-bootstrap-rails version)*
191+
192+
**From 2.2.7**
193+
194+
```css
195+
// Font Awesome
196+
@fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
197+
@fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
198+
@fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
199+
@fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
200+
@fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
201+
@import "fontawesome/font-awesome";
202+
```
203+
204+
**Before 2.2.7**
188205

189206
```css
190207
// Font Awesome
191-
// @import "fontawesome";
208+
@fontAwesomeEotPath: "/assets/fontawesome-webfont.eot";
209+
@fontAwesomeEotPath_iefix: "/assets/fontawesome-webfont.eot?#iefix";
210+
@fontAwesomeWoffPath: "/assets/fontawesome-webfont.woff";
211+
@fontAwesomeTtfPath: "/assets/fontawesome-webfont.ttf";
212+
@fontAwesomeSvgPath: "/assets/fontawesome-webfont.svg#fontawesomeregular";
213+
@import "fontawesome";
214+
```
215+
216+
If you would like to restore the default Glyphicons, inside the _bootstrap_and_overrides.css.less_ remove the FontAwesome declaration and uncomment the line:
217+
218+
```less
219+
// Font Awesome
220+
// @fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
221+
// @fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
222+
// @fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
223+
// @fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
224+
// @fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
225+
// @import "fontawesome/font-awesome";
226+
192227
// Glyphicons
193228
@import "twitter/bootstrap/sprites.less";
194229
```
@@ -242,7 +277,7 @@ The href of the button to launch the modal must matche the id of the modal dialo
242277
<%= content_tag :a, "Modal", :href => "#modal", :class => 'btn', :data => {:toggle => 'modal'} %>
243278
244279
<%= modal_dialog :id => "modal",
245-
:header => { :show_close => true, :dismiss => 'modal', :title => 'Modal header' },
280+
:header => { :show_close => true, :dismiss => 'modal', :title => 'Modal header' },
246281
:body => 'This is the body',
247282
:footer => content_tag(:button, 'Save', :class => 'btn') %>
248283
````
@@ -252,31 +287,31 @@ It should let you write things like:
252287

253288
````
254289
<%= nav_bar :fixed => :top, :brand => "Fashionable Clicheizr 2.0", :responsive => true do %>
255-
<%= menu_group do %>
256-
<%= menu_item "Home", root_path %>
257-
<%= menu_divider %>
258-
<%= drop_down "Products" do %>
259-
<%= menu_item "Things you can't afford", expensive_products_path %>
260-
<%= menu_item "Things that won't suit you anyway", harem_pants_path %>
261-
<%= menu_item "Things you're not even cool enough to buy anyway", hipster_products_path %>
262-
<% if current_user.lives_in_hackney? %>
263-
<%= menu_item "Bikes", fixed_wheel_bikes_path %>
264-
<% end %>
265-
<% end %>
266-
<%= menu_item "About Us", about_us_path %>
267-
<%= menu_item "Contact", contact_path %>
268-
<% end %>
269-
<%= menu_group :pull => :right do %>
270-
<% if current_user %>
271-
<%= menu_item "Log Out", log_out_path %>
272-
<% else %>
273-
<%= form_for @user, :url => session_path(:user), html => {:class=> "navbar-form pull-right"} do |f| -%>
274-
<p><%= f.text_field :email %></p>
275-
<p><%= f.password_field :password %></p>
276-
<p><%= f.submit "Sign in" %></p>
277-
<% end -%>
278-
<% end %>
279-
<% end %>
290+
<%= menu_group do %>
291+
<%= menu_item "Home", root_path %>
292+
<%= menu_divider %>
293+
<%= drop_down "Products" do %>
294+
<%= menu_item "Things you can't afford", expensive_products_path %>
295+
<%= menu_item "Things that won't suit you anyway", harem_pants_path %>
296+
<%= menu_item "Things you're not even cool enough to buy anyway", hipster_products_path %>
297+
<% if current_user.lives_in_hackney? %>
298+
<%= menu_item "Bikes", fixed_wheel_bikes_path %>
299+
<% end %>
300+
<% end %>
301+
<%= menu_item "About Us", about_us_path %>
302+
<%= menu_item "Contact", contact_path %>
303+
<% end %>
304+
<%= menu_group :pull => :right do %>
305+
<% if current_user %>
306+
<%= menu_item "Log Out", log_out_path %>
307+
<% else %>
308+
<%= form_for @user, :url => session_path(:user), html => {:class=> "navbar-form pull-right"} do |f| -%>
309+
<p><%= f.text_field :email %></p>
310+
<p><%= f.password_field :password %></p>
311+
<p><%= f.submit "Sign in" %></p>
312+
<% end -%>
313+
<% end %>
314+
<% end %>
280315
<% end %>
281316
````
282317

@@ -290,12 +325,12 @@ In your view file (most likely application.html.erb) to get a basic navbar set u
290325

291326
Which will render:
292327

293-
<div class="navbar">
294-
<div class="navbar-inner">
295-
<div class="container">
296-
</div>
297-
</div>
298-
</div>
328+
<div class="navbar">
329+
<div class="navbar-inner">
330+
<div class="container">
331+
</div>
332+
</div>
333+
</div>
299334

300335

301336
### Fixed navbar
@@ -308,12 +343,12 @@ If you want the navbar to stick to the top of the screen, pass in the option lik
308343

309344
To render:
310345

311-
<div class="navbar navbar-fixed-top">
312-
<div class="navbar-inner">
313-
<div class="container">
314-
</div>
315-
</div>
316-
</div>
346+
<div class="navbar navbar-fixed-top">
347+
<div class="navbar-inner">
348+
<div class="container">
349+
</div>
350+
</div>
351+
</div>
317352

318353
### Static navbar
319354

@@ -325,12 +360,12 @@ If you want a full-width navbar that scrolls away with the page, pass in the opt
325360

326361
To render:
327362

328-
<div class="navbar navbar-static-top">
329-
<div class="navbar-inner">
330-
<div class="container">
331-
</div>
332-
</div>
333-
</div>
363+
<div class="navbar navbar-static-top">
364+
<div class="navbar-inner">
365+
<div class="container">
366+
</div>
367+
</div>
368+
</div>
334369

335370

336371
### Brand name
@@ -343,15 +378,15 @@ Add the name of your site on the left hand edge of the navbar. By default, it wi
343378

344379
Which will render:
345380

346-
<div class="navbar">
347-
<div class="navbar-inner">
348-
<div class="container">
349-
<a class="brand" href="/accounts/dashboard">
350-
We're sooo web 2.0alizr
351-
</a>
352-
</div>
353-
</div>
354-
</div>
381+
<div class="navbar">
382+
<div class="navbar-inner">
383+
<div class="container">
384+
<a class="brand" href="/accounts/dashboard">
385+
We're sooo web 2.0alizr
386+
</a>
387+
</div>
388+
</div>
389+
</div>
355390

356391

357392
### Optional responsive variation
@@ -364,22 +399,22 @@ If you want the responsive version of the navbar to work (One that shrinks down
364399
Which renders the html quite differently:
365400

366401

367-
<div class="navbar">
368-
<div class="navbar-inner">
369-
<div class="container">
370-
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
371-
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
372-
<span class="icon-bar"></span>
373-
<span class="icon-bar"></span>
374-
<span class="icon-bar"></span>
375-
</a>
376-
<!-- Everything in here gets hidden at 940px or less -->
377-
<div class="nav-collapse">
378-
<!-- menu items gets rendered here instead -->
379-
</div>
380-
</div>
381-
</div>
382-
</div>
402+
<div class="navbar">
403+
<div class="navbar-inner">
404+
<div class="container">
405+
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
406+
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
407+
<span class="icon-bar"></span>
408+
<span class="icon-bar"></span>
409+
<span class="icon-bar"></span>
410+
</a>
411+
<!-- Everything in here gets hidden at 940px or less -->
412+
<div class="nav-collapse">
413+
<!-- menu items gets rendered here instead -->
414+
</div>
415+
</div>
416+
</div>
417+
</div>
383418

384419

385420
### Nav links
@@ -398,23 +433,23 @@ menu_item generates a link wrapped in an li tag. It takes two arguments and an o
398433

399434
````
400435
<%= nav_bar :fixed => :top, :brand => "Ninety Ten" do %>
401-
<% menu_group do %>
402-
<%= menu_item "Home", root_path %>
403-
<%= menu_item "About Us", about_us_path %>
404-
<%= menu_item "Contact", contact_path %>
405-
<% end %>
406-
<% if current_user %>
407-
<%= menu_item "Log Out", log_out_path %>
408-
<% else %>
409-
<% menu_group :pull => :right do %>
410-
<%= menu_item "Sign Up", registration_path %>
411-
<% form_for @user, :url => session_path(:user) do |f| -%>
412-
<p><%= f.text_field :email %></p>
413-
<p><%= f.password_field :password %></p>
414-
<p><%= f.submit "Sign in" %></p>
415-
<% end -%>
416-
<% end %>
417-
<% end %>
436+
<% menu_group do %>
437+
<%= menu_item "Home", root_path %>
438+
<%= menu_item "About Us", about_us_path %>
439+
<%= menu_item "Contact", contact_path %>
440+
<% end %>
441+
<% if current_user %>
442+
<%= menu_item "Log Out", log_out_path %>
443+
<% else %>
444+
<% menu_group :pull => :right do %>
445+
<%= menu_item "Sign Up", registration_path %>
446+
<% form_for @user, :url => session_path(:user) do |f| -%>
447+
<p><%= f.text_field :email %></p>
448+
<p><%= f.password_field :password %></p>
449+
<p><%= f.submit "Sign in" %></p>
450+
<% end -%>
451+
<% end %>
452+
<% end %>
418453
<% end %>
419454
````
420455

@@ -424,17 +459,17 @@ For multi-level list options, where it makes logical sense to group menu items,
424459

425460
````
426461
<%= nav_bar do %>
427-
<%= menu_item "Home", root_path %>
462+
<%= menu_item "Home", root_path %>
428463
429-
<%= drop_down "Products" do %>
430-
<%= menu_item "Latest", latest_products_path %>
431-
<%= menu_item "Top Sellers", popular_products_path %>
432-
<%= drop_down_divider %>
433-
<%= menu_item "Discount Items", discounted_products_path %>
434-
<% end %>
464+
<%= drop_down "Products" do %>
465+
<%= menu_item "Latest", latest_products_path %>
466+
<%= menu_item "Top Sellers", popular_products_path %>
467+
<%= drop_down_divider %>
468+
<%= menu_item "Discount Items", discounted_products_path %>
469+
<% end %>
435470
436-
<%= menu_item "About Us", about_us_path %>
437-
<%= menu_item "Contact", contact_path %>
471+
<%= menu_item "About Us", about_us_path %>
472+
<%= menu_item "Contact", contact_path %>
438473
<% end %>
439474
````
440475

@@ -444,15 +479,15 @@ Dividers are just vertical bars that visually separate logically disparate group
444479

445480
````
446481
<%= nav_bar :fixed => :bottom do %>
447-
<%= menu_item "Home", root_path %>
448-
<%= menu_item "About Us", about_us_path %>
449-
<%= menu_item "Contact", contact_path %>
482+
<%= menu_item "Home", root_path %>
483+
<%= menu_item "About Us", about_us_path %>
484+
<%= menu_item "Contact", contact_path %>
450485
451-
<%= menu_divider %>
486+
<%= menu_divider %>
452487
453-
<%= menu_item "Edit Profile", edit_user_path(current_user) %>
454-
<%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
455-
<%= menu_item "Log Out", log_out_path %>
488+
<%= menu_item "Edit Profile", edit_user_path(current_user) %>
489+
<%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
490+
<%= menu_item "Log Out", log_out_path %>
456491
<% end %>
457492
````
458493

@@ -488,16 +523,16 @@ You can shift things to the left or the right across the nav bar. It's easiest t
488523

489524
````
490525
<%= nav_bar :fixed => :bottom do %>
491-
<% menu_group do %>
492-
<%= menu_item "Home", root_path %>
493-
<%= menu_item "About Us", about_us_path %>
494-
<%= menu_item "Contact", contact_path %>
495-
<% end %>
496-
<% menu_group :pull => :right do %>
497-
<%= menu_item "Edit Profile", edit_user_path(current_user) %>
498-
<%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
499-
<%= menu_item "Log Out", log_out_path %>
500-
<% end %>
526+
<% menu_group do %>
527+
<%= menu_item "Home", root_path %>
528+
<%= menu_item "About Us", about_us_path %>
529+
<%= menu_item "Contact", contact_path %>
530+
<% end %>
531+
<% menu_group :pull => :right do %>
532+
<%= menu_item "Edit Profile", edit_user_path(current_user) %>
533+
<%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
534+
<%= menu_item "Log Out", log_out_path %>
535+
<% end %>
501536
<% end %>
502537
````
503538

@@ -507,9 +542,9 @@ If you want to put regular plain text in the navbar anywhere, you do it like thi
507542

508543
````
509544
<%= nav_bar :brand => "Apple" do %>
510-
<%= menu_text "We make shiny things" %>
511-
<%= menu_item "Home", root_path %>
512-
<%= menu_item "About Us", about_us_path %>
545+
<%= menu_text "We make shiny things" %>
546+
<%= menu_item "Home", root_path %>
547+
<%= menu_item "About Us", about_us_path %>
513548
<% end %>
514549
````
515550
It also takes the :pull option to drag it to the left or right.

0 commit comments

Comments
 (0)