font_awesome_rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +18 -0
- data/.rspec +2 -0
- data/Gemfile +2 -0
- data/LICENSE.md +26 -0
- data/README.md +69 -0
- data/Rakefile +6 -0
- data/app/assets/stylesheets/_font-awesome.scss +2 -0
- data/app/assets/stylesheets/font-awesome/_font.scss +13 -0
- data/app/assets/stylesheets/font-awesome/_icons.scss +210 -0
- data/app/assets/stylesheets/font-awesome/_mixins.scss +58 -0
- data/app/assets/stylesheets/font-awesome/_styles.scss +53 -0
- data/font_awesome_rails.gemspec +25 -0
- data/lib/font_awesome/font.rb +52 -0
- data/lib/font_awesome/hex_code.rb +39 -0
- data/lib/font_awesome/icon.rb +80 -0
- data/lib/font_awesome/nokogiri.rb +17 -0
- data/lib/font_awesome/sass_extensions/functions.rb +26 -0
- data/lib/font_awesome/sass_extensions.rb +6 -0
- data/lib/font_awesome.rb +10 -0
- data/lib/font_awesome_rails/engine.rb +4 -0
- data/lib/font_awesome_rails/version.rb +3 -0
- data/lib/font_awesome_rails.rb +10 -0
- data/spec/font_awesome/font_spec.rb +103 -0
- data/spec/font_awesome/hex_code_spec.rb +66 -0
- data/spec/font_awesome/icon_spec.rb +92 -0
- data/spec/font_awesome/sass_extensions/functions_spec.rb +69 -0
- data/spec/spec_helper.rb +14 -0
- data/spec/tasks/update_classic_sass_task_spec.rb +33 -0
- data/spec/tasks/update_hex_codes_task_spec.rb +44 -0
- data/spec/tasks/update_metrics_task_spec.rb +34 -0
- data/spec/tasks/update_sass_task_spec.rb +20 -0
- data/tasks/gem_dir.rb +12 -0
- data/tasks/spec.rake +3 -0
- data/tasks/task.rb +5 -0
- data/tasks/update/classic.rake +27 -0
- data/tasks/update/font.rake +13 -0
- data/tasks/update/font_awesome.rake +20 -0
- data/tasks/update/hex_codes.rake +9 -0
- data/tasks/update/metrics.rake +8 -0
- data/tasks/update/metrics.rb +62 -0
- data/tasks/update/sass.rake +6 -0
- data/tasks/update/update_classic_sass_task.rb +21 -0
- data/tasks/update/update_hex_codes_task.rb +34 -0
- data/tasks/update/update_metrics_task.rb +25 -0
- data/tasks/update/update_sass_task.rb +20 -0
- data/tasks/update.rake +8 -0
- data/vendor/assets/font/fontawesome-webfont.eot +0 -0
- data/vendor/assets/font/fontawesome-webfont.svg +255 -0
- data/vendor/assets/font/fontawesome-webfont.ttf +0 -0
- data/vendor/assets/font/fontawesome-webfont.woff +0 -0
- data/vendor/assets/stylesheets/font-awesome/_classic.scss +292 -0
- data/vendor/assets/stylesheets/font-awesome/ie7.css +645 -0
- metadata +225 -0
data/.gitignore
ADDED
data/.rspec
ADDED
data/Gemfile
ADDED
data/LICENSE.md
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
Copyright © 2012 Andrew Haines
|
2
|
+
|
3
|
+
Fonts and "classic" styles are licensed under
|
4
|
+
[CC BY 3.0](http://creativecommons.org/licenses/by/3.0/) from
|
5
|
+
[Font Awesome](http://fortawesome.github.com/Font-Awesome).
|
6
|
+
|
7
|
+
# MIT License
|
8
|
+
|
9
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
10
|
+
a copy of this software and associated documentation files (the
|
11
|
+
"Software"), to deal in the Software without restriction, including
|
12
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
13
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
14
|
+
permit persons to whom the Software is furnished to do so, subject to
|
15
|
+
the following conditions:
|
16
|
+
|
17
|
+
The above copyright notice and this permission notice shall be
|
18
|
+
included in all copies or substantial portions of the Software.
|
19
|
+
|
20
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
21
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
22
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
23
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
24
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
25
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
26
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,69 @@
|
|
1
|
+
# Font Awesome for Rails
|
2
|
+
[![Code Climate](https://codeclimate.com/badge.png)](https://codeclimate.com/github/haines/font_awesome_rails)
|
3
|
+
|
4
|
+
font_awesome_rails brings the fantastic [Font Awesome](http://fortawesome.github.com/Font-Awesome) iconic font to the Rails asset pipeline, with a bunch of new Sass styles for semantic markup.
|
5
|
+
|
6
|
+
|
7
|
+
## Semantic markup
|
8
|
+
|
9
|
+
Wouldn't be great if instead of
|
10
|
+
```html
|
11
|
+
<a class="btn" href="..."><i class="icon-pencil"></i> Edit</a>
|
12
|
+
```
|
13
|
+
you could just write
|
14
|
+
```html
|
15
|
+
<a class="edit btn" href="...">Edit</a>
|
16
|
+
```
|
17
|
+
so that down the line you can restyle your edit links with impunity (and save yourself some keystrokes while you're at it)?
|
18
|
+
|
19
|
+
Thanks to the mixins provided by font_awesome_rails, you can!
|
20
|
+
```scss
|
21
|
+
.edit.btn {
|
22
|
+
@include icon(pencil);
|
23
|
+
}
|
24
|
+
```
|
25
|
+
|
26
|
+
|
27
|
+
## Installation
|
28
|
+
|
29
|
+
Add this line to your application's Gemfile:
|
30
|
+
```ruby
|
31
|
+
gem 'font_awesome_rails'
|
32
|
+
```
|
33
|
+
And then execute:
|
34
|
+
```bash
|
35
|
+
$ bundle
|
36
|
+
```
|
37
|
+
|
38
|
+
Finally, add this line to your application.css.scss:
|
39
|
+
```scss
|
40
|
+
@import 'font-awesome';
|
41
|
+
```
|
42
|
+
Note that you need to `@import` it with Sass and not `*= require` it with Sprockets.
|
43
|
+
|
44
|
+
|
45
|
+
## Usage
|
46
|
+
|
47
|
+
### Adding icons
|
48
|
+
`@include` any of the following mixins to add icons to your elements:
|
49
|
+
- `icon-before($name)`: prepend the named icon
|
50
|
+
- `icon-after($name)`: append the named icon
|
51
|
+
- `icon($before)`: alias for `icon-before`
|
52
|
+
- `icon($before, $after)`: append and prepend the named icons
|
53
|
+
|
54
|
+
Each of these mixins can optionally take a
|
55
|
+
[content block](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content)
|
56
|
+
with styles to be applied to the icon.
|
57
|
+
|
58
|
+
|
59
|
+
## Compatibility
|
60
|
+
|
61
|
+
If you've already integrated your app with [Bootstrap](http://twitter.github.com/bootstrap)
|
62
|
+
and/or Font Awesome, you can get the classic `.icon-*` styles back by adding
|
63
|
+
```scss
|
64
|
+
@import 'font-awesome/classic';
|
65
|
+
```
|
66
|
+
to your application.css.scss.
|
67
|
+
|
68
|
+
If you're unlucky enough to need IE 7 compatibility, it's under `font-awesome/ie7`.
|
69
|
+
Classic styles only (no mixins) so you can `@import` or `*= require` it as you see fit.
|
data/Rakefile
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
@font-face {
|
2
|
+
font: {
|
3
|
+
family: 'FontAwesome';
|
4
|
+
weight: normal;
|
5
|
+
style: normal;
|
6
|
+
}
|
7
|
+
|
8
|
+
src: font-url('fontawesome-webfont.eot');
|
9
|
+
src: font-url('fontawesome-webfont.eot?#iefix') format('eot'),
|
10
|
+
font-url('fontawesome-webfont.woff') format('woff'),
|
11
|
+
font-url('fontawesome-webfont.ttf') format('truetype'),
|
12
|
+
font-url('fontawesome-webfont.svg#FontAwesome') format('svg');
|
13
|
+
}
|
@@ -0,0 +1,210 @@
|
|
1
|
+
%icon-glass { content: '\f000'; }
|
2
|
+
%icon-music { content: '\f001'; }
|
3
|
+
%icon-search { content: '\f002'; }
|
4
|
+
%icon-envelope { content: '\f003'; }
|
5
|
+
%icon-heart { content: '\f004'; }
|
6
|
+
%icon-star { content: '\f005'; }
|
7
|
+
%icon-star-empty { content: '\f006'; }
|
8
|
+
%icon-user { content: '\f007'; }
|
9
|
+
%icon-film { content: '\f008'; }
|
10
|
+
%icon-th-large { content: '\f009'; }
|
11
|
+
%icon-th { content: '\f00a'; }
|
12
|
+
%icon-th-list { content: '\f00b'; }
|
13
|
+
%icon-ok { content: '\f00c'; }
|
14
|
+
%icon-remove { content: '\f00d'; }
|
15
|
+
%icon-zoom-in { content: '\f00e'; }
|
16
|
+
%icon-zoom-out { content: '\f010'; }
|
17
|
+
%icon-off { content: '\f011'; }
|
18
|
+
%icon-signal { content: '\f012'; }
|
19
|
+
%icon-cog { content: '\f013'; }
|
20
|
+
%icon-trash { content: '\f014'; }
|
21
|
+
%icon-home { content: '\f015'; }
|
22
|
+
%icon-file { content: '\f016'; }
|
23
|
+
%icon-time { content: '\f017'; }
|
24
|
+
%icon-road { content: '\f018'; }
|
25
|
+
%icon-download-alt { content: '\f019'; }
|
26
|
+
%icon-download { content: '\f01a'; }
|
27
|
+
%icon-upload { content: '\f01b'; }
|
28
|
+
%icon-inbox { content: '\f01c'; }
|
29
|
+
%icon-play-circle { content: '\f01d'; }
|
30
|
+
%icon-repeat { content: '\f01e'; }
|
31
|
+
%icon-refresh { content: '\f021'; }
|
32
|
+
%icon-list-alt { content: '\f022'; }
|
33
|
+
%icon-lock { content: '\f023'; }
|
34
|
+
%icon-flag { content: '\f024'; }
|
35
|
+
%icon-headphones { content: '\f025'; }
|
36
|
+
%icon-volume-off { content: '\f026'; }
|
37
|
+
%icon-volume-down { content: '\f027'; }
|
38
|
+
%icon-volume-up { content: '\f028'; }
|
39
|
+
%icon-qrcode { content: '\f029'; }
|
40
|
+
%icon-barcode { content: '\f02a'; }
|
41
|
+
%icon-tag { content: '\f02b'; }
|
42
|
+
%icon-tags { content: '\f02c'; }
|
43
|
+
%icon-book { content: '\f02d'; }
|
44
|
+
%icon-bookmark { content: '\f02e'; }
|
45
|
+
%icon-print { content: '\f02f'; }
|
46
|
+
%icon-camera { content: '\f030'; }
|
47
|
+
%icon-font { content: '\f031'; }
|
48
|
+
%icon-bold { content: '\f032'; }
|
49
|
+
%icon-italic { content: '\f033'; }
|
50
|
+
%icon-text-height { content: '\f034'; }
|
51
|
+
%icon-text-width { content: '\f035'; }
|
52
|
+
%icon-align-left { content: '\f036'; }
|
53
|
+
%icon-align-center { content: '\f037'; }
|
54
|
+
%icon-align-right { content: '\f038'; }
|
55
|
+
%icon-align-justify { content: '\f039'; }
|
56
|
+
%icon-list { content: '\f03a'; }
|
57
|
+
%icon-indent-left { content: '\f03b'; }
|
58
|
+
%icon-indent-right { content: '\f03c'; }
|
59
|
+
%icon-facetime-video { content: '\f03d'; }
|
60
|
+
%icon-picture { content: '\f03e'; }
|
61
|
+
%icon-pencil { content: '\f040'; }
|
62
|
+
%icon-map-marker { content: '\f041'; }
|
63
|
+
%icon-adjust { content: '\f042'; }
|
64
|
+
%icon-tint { content: '\f043'; }
|
65
|
+
%icon-edit { content: '\f044'; }
|
66
|
+
%icon-share { content: '\f045'; }
|
67
|
+
%icon-check { content: '\f046'; }
|
68
|
+
%icon-move { content: '\f047'; }
|
69
|
+
%icon-step-backward { content: '\f048'; }
|
70
|
+
%icon-fast-backward { content: '\f049'; }
|
71
|
+
%icon-backward { content: '\f04a'; }
|
72
|
+
%icon-play { content: '\f04b'; }
|
73
|
+
%icon-pause { content: '\f04c'; }
|
74
|
+
%icon-stop { content: '\f04d'; }
|
75
|
+
%icon-forward { content: '\f04e'; }
|
76
|
+
%icon-fast-forward { content: '\f050'; }
|
77
|
+
%icon-step-forward { content: '\f051'; }
|
78
|
+
%icon-eject { content: '\f052'; }
|
79
|
+
%icon-chevron-left { content: '\f053'; }
|
80
|
+
%icon-chevron-right { content: '\f054'; }
|
81
|
+
%icon-plus-sign { content: '\f055'; }
|
82
|
+
%icon-minus-sign { content: '\f056'; }
|
83
|
+
%icon-remove-sign { content: '\f057'; }
|
84
|
+
%icon-ok-sign { content: '\f058'; }
|
85
|
+
%icon-question-sign { content: '\f059'; }
|
86
|
+
%icon-info-sign { content: '\f05a'; }
|
87
|
+
%icon-screenshot { content: '\f05b'; }
|
88
|
+
%icon-remove-circle { content: '\f05c'; }
|
89
|
+
%icon-ok-circle { content: '\f05d'; }
|
90
|
+
%icon-ban-circle { content: '\f05e'; }
|
91
|
+
%icon-arrow-left { content: '\f060'; }
|
92
|
+
%icon-arrow-right { content: '\f061'; }
|
93
|
+
%icon-arrow-up { content: '\f062'; }
|
94
|
+
%icon-arrow-down { content: '\f063'; }
|
95
|
+
%icon-share-alt { content: '\f064'; }
|
96
|
+
%icon-resize-full { content: '\f065'; }
|
97
|
+
%icon-resize-small { content: '\f066'; }
|
98
|
+
%icon-plus { content: '\f067'; }
|
99
|
+
%icon-minus { content: '\f068'; }
|
100
|
+
%icon-asterisk { content: '\f069'; }
|
101
|
+
%icon-exclamation-sign { content: '\f06a'; }
|
102
|
+
%icon-gift { content: '\f06b'; }
|
103
|
+
%icon-leaf { content: '\f06c'; }
|
104
|
+
%icon-fire { content: '\f06d'; }
|
105
|
+
%icon-eye-open { content: '\f06e'; }
|
106
|
+
%icon-eye-close { content: '\f070'; }
|
107
|
+
%icon-warning-sign { content: '\f071'; }
|
108
|
+
%icon-plane { content: '\f072'; }
|
109
|
+
%icon-calendar { content: '\f073'; }
|
110
|
+
%icon-random { content: '\f074'; }
|
111
|
+
%icon-comment { content: '\f075'; }
|
112
|
+
%icon-magnet { content: '\f076'; }
|
113
|
+
%icon-chevron-up { content: '\f077'; }
|
114
|
+
%icon-chevron-down { content: '\f078'; }
|
115
|
+
%icon-retweet { content: '\f079'; }
|
116
|
+
%icon-shopping-cart { content: '\f07a'; }
|
117
|
+
%icon-folder-close { content: '\f07b'; }
|
118
|
+
%icon-folder-open { content: '\f07c'; }
|
119
|
+
%icon-resize-vertical { content: '\f07d'; }
|
120
|
+
%icon-resize-horizontal { content: '\f07e'; }
|
121
|
+
%icon-bar-chart { content: '\f080'; }
|
122
|
+
%icon-twitter-sign { content: '\f081'; }
|
123
|
+
%icon-facebook-sign { content: '\f082'; }
|
124
|
+
%icon-camera-retro { content: '\f083'; }
|
125
|
+
%icon-key { content: '\f084'; }
|
126
|
+
%icon-cogs { content: '\f085'; }
|
127
|
+
%icon-comments { content: '\f086'; }
|
128
|
+
%icon-thumbs-up { content: '\f087'; }
|
129
|
+
%icon-thumbs-down { content: '\f088'; }
|
130
|
+
%icon-star-half { content: '\f089'; }
|
131
|
+
%icon-heart-empty { content: '\f08a'; }
|
132
|
+
%icon-signout { content: '\f08b'; }
|
133
|
+
%icon-linkedin-sign { content: '\f08c'; }
|
134
|
+
%icon-pushpin { content: '\f08d'; }
|
135
|
+
%icon-external-link { content: '\f08e'; }
|
136
|
+
%icon-signin { content: '\f090'; }
|
137
|
+
%icon-trophy { content: '\f091'; }
|
138
|
+
%icon-github-sign { content: '\f092'; }
|
139
|
+
%icon-upload-alt { content: '\f093'; }
|
140
|
+
%icon-lemon { content: '\f094'; }
|
141
|
+
%icon-phone { content: '\f095'; }
|
142
|
+
%icon-check-empty { content: '\f096'; }
|
143
|
+
%icon-bookmark-empty { content: '\f097'; }
|
144
|
+
%icon-phone-sign { content: '\f098'; }
|
145
|
+
%icon-twitter { content: '\f099'; }
|
146
|
+
%icon-facebook { content: '\f09a'; }
|
147
|
+
%icon-github { content: '\f09b'; }
|
148
|
+
%icon-unlock { content: '\f09c'; }
|
149
|
+
%icon-credit-card { content: '\f09d'; }
|
150
|
+
%icon-rss { content: '\f09e'; }
|
151
|
+
%icon-hdd { content: '\f0a0'; }
|
152
|
+
%icon-bullhorn { content: '\f0a1'; }
|
153
|
+
%icon-bell { content: '\f0a2'; }
|
154
|
+
%icon-certificate { content: '\f0a3'; }
|
155
|
+
%icon-hand-right { content: '\f0a4'; }
|
156
|
+
%icon-hand-left { content: '\f0a5'; }
|
157
|
+
%icon-hand-up { content: '\f0a6'; }
|
158
|
+
%icon-hand-down { content: '\f0a7'; }
|
159
|
+
%icon-circle-arrow-left { content: '\f0a8'; }
|
160
|
+
%icon-circle-arrow-right { content: '\f0a9'; }
|
161
|
+
%icon-circle-arrow-up { content: '\f0aa'; }
|
162
|
+
%icon-circle-arrow-down { content: '\f0ab'; }
|
163
|
+
%icon-globe { content: '\f0ac'; }
|
164
|
+
%icon-wrench { content: '\f0ad'; }
|
165
|
+
%icon-tasks { content: '\f0ae'; }
|
166
|
+
%icon-filter { content: '\f0b0'; }
|
167
|
+
%icon-briefcase { content: '\f0b1'; }
|
168
|
+
%icon-fullscreen { content: '\f0b2'; }
|
169
|
+
%icon-group { content: '\f0c0'; }
|
170
|
+
%icon-link { content: '\f0c1'; }
|
171
|
+
%icon-cloud { content: '\f0c2'; }
|
172
|
+
%icon-beaker { content: '\f0c3'; }
|
173
|
+
%icon-cut { content: '\f0c4'; }
|
174
|
+
%icon-copy { content: '\f0c5'; }
|
175
|
+
%icon-paper-clip { content: '\f0c6'; }
|
176
|
+
%icon-save { content: '\f0c7'; }
|
177
|
+
%icon-sign-blank { content: '\f0c8'; }
|
178
|
+
%icon-reorder { content: '\f0c9'; }
|
179
|
+
%icon-list-ul { content: '\f0ca'; }
|
180
|
+
%icon-list-ol { content: '\f0cb'; }
|
181
|
+
%icon-strikethrough { content: '\f0cc'; }
|
182
|
+
%icon-underline { content: '\f0cd'; }
|
183
|
+
%icon-table { content: '\f0ce'; }
|
184
|
+
%icon-magic { content: '\f0d0'; }
|
185
|
+
%icon-truck { content: '\f0d1'; }
|
186
|
+
%icon-pinterest { content: '\f0d2'; }
|
187
|
+
%icon-pinterest-sign { content: '\f0d3'; }
|
188
|
+
%icon-google-plus-sign { content: '\f0d4'; }
|
189
|
+
%icon-google-plus { content: '\f0d5'; }
|
190
|
+
%icon-money { content: '\f0d6'; }
|
191
|
+
%icon-caret-down { content: '\f0d7'; }
|
192
|
+
%icon-caret-up { content: '\f0d8'; }
|
193
|
+
%icon-caret-left { content: '\f0d9'; }
|
194
|
+
%icon-caret-right { content: '\f0da'; }
|
195
|
+
%icon-columns { content: '\f0db'; }
|
196
|
+
%icon-sort { content: '\f0dc'; }
|
197
|
+
%icon-sort-down { content: '\f0dd'; }
|
198
|
+
%icon-sort-up { content: '\f0de'; }
|
199
|
+
%icon-envelope-alt { content: '\f0e0'; }
|
200
|
+
%icon-linkedin { content: '\f0e1'; }
|
201
|
+
%icon-undo { content: '\f0e2'; }
|
202
|
+
%icon-legal { content: '\f0e3'; }
|
203
|
+
%icon-dashboard { content: '\f0e4'; }
|
204
|
+
%icon-comment-alt { content: '\f0e5'; }
|
205
|
+
%icon-comments-alt { content: '\f0e6'; }
|
206
|
+
%icon-bolt { content: '\f0e7'; }
|
207
|
+
%icon-sitemap { content: '\f0e8'; }
|
208
|
+
%icon-umbrella { content: '\f0e9'; }
|
209
|
+
%icon-paste { content: '\f0ea'; }
|
210
|
+
%icon-user-md { content: '\f200'; }
|
@@ -0,0 +1,58 @@
|
|
1
|
+
@mixin icon($before, $after: false) {
|
2
|
+
@include icon-before($before) { @content; }
|
3
|
+
@if $after {
|
4
|
+
@include icon-after($after) { @content; }
|
5
|
+
}
|
6
|
+
}
|
7
|
+
|
8
|
+
@mixin icon-before($name) {
|
9
|
+
@extend %icon-before;
|
10
|
+
@include icon-before-style {
|
11
|
+
@include icon-content($name);
|
12
|
+
@content;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
@mixin icon-after($name) {
|
17
|
+
@extend %icon-after;
|
18
|
+
@include icon-after-style {
|
19
|
+
@include icon-content($name);
|
20
|
+
@content;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
@mixin icon-content($name) {
|
25
|
+
@extend %icon-content;
|
26
|
+
@extend %icon-#{$name};
|
27
|
+
}
|
28
|
+
|
29
|
+
@mixin icon-image($args...) {
|
30
|
+
background: {
|
31
|
+
image: url(icon-image($args...));
|
32
|
+
repeat: no-repeat;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin icon-style {
|
37
|
+
@include icon-before-style {
|
38
|
+
@content;
|
39
|
+
}
|
40
|
+
@include icon-after-style {
|
41
|
+
@content;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
@mixin icon-before-style {
|
46
|
+
&%icon-before:before {
|
47
|
+
@content;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
@mixin icon-after-style {
|
52
|
+
&%icon-after:after {
|
53
|
+
@content;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
@import "styles";
|
58
|
+
@import "icons";
|
@@ -0,0 +1,53 @@
|
|
1
|
+
%icon-content {
|
2
|
+
font-family: FontAwesome;
|
3
|
+
font-weight: normal;
|
4
|
+
font-style: normal;
|
5
|
+
display: inline-block;
|
6
|
+
text-decoration: inherit;
|
7
|
+
}
|
8
|
+
|
9
|
+
%icon {
|
10
|
+
@extend %icon-before;
|
11
|
+
}
|
12
|
+
|
13
|
+
* {
|
14
|
+
@include icon-before-style {
|
15
|
+
margin-right: 0.25em;
|
16
|
+
}
|
17
|
+
@include icon-after-style {
|
18
|
+
margin-left: 0.25em;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
%icon-large {
|
23
|
+
@include icon-style {
|
24
|
+
vertical-align: top;
|
25
|
+
font-size: #{(4/3)}em;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
.btn, .nav-tabs {
|
30
|
+
@include icon-style {
|
31
|
+
line-height: 0.9; // keeps button heights with and without icons the same
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
li {
|
36
|
+
@include icon-style {
|
37
|
+
display: inline-block;
|
38
|
+
width: 1.25em;
|
39
|
+
text-align: center;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
%icon-list {
|
44
|
+
list-style-type: none;
|
45
|
+
margin-left: 2em;
|
46
|
+
text-indent: -0.8em;
|
47
|
+
|
48
|
+
li {
|
49
|
+
@include icon-style {
|
50
|
+
width: 0.8em;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
require File.expand_path('../lib/font_awesome_rails/version', __FILE__)
|
2
|
+
|
3
|
+
Gem::Specification.new do |gem|
|
4
|
+
gem.authors = ["Andrew Haines"]
|
5
|
+
gem.email = ["andrew@haines.org.nz"]
|
6
|
+
gem.description = %q{Font Awesome for Rails}
|
7
|
+
gem.summary = %q{Brings the fantastic Font Awesome iconic font to the Rails asset pipeline, with a bunch of new Sass styles for semantic markup.}
|
8
|
+
gem.homepage = "http://github.com/haines/font_awesome_rails"
|
9
|
+
|
10
|
+
gem.files = `git ls-files`.split($\)
|
11
|
+
gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
|
12
|
+
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
|
13
|
+
gem.name = "font_awesome_rails"
|
14
|
+
gem.require_paths = ["lib"]
|
15
|
+
gem.version = FontAwesomeRails::VERSION
|
16
|
+
|
17
|
+
gem.add_dependency 'sass', '>= 3.2.0'
|
18
|
+
gem.add_dependency 'activesupport', '>= 3.1.0'
|
19
|
+
|
20
|
+
gem.add_development_dependency 'rake'
|
21
|
+
gem.add_development_dependency 'rspec', '>= 2.8.0'
|
22
|
+
gem.add_development_dependency 'mocha', '>= 0.12.0'
|
23
|
+
gem.add_development_dependency 'nokogiri', '>= 1.5.0'
|
24
|
+
gem.add_development_dependency 'rmagick', '>= 2.13.0'
|
25
|
+
end
|
@@ -0,0 +1,52 @@
|
|
1
|
+
require 'singleton'
|
2
|
+
|
3
|
+
module FontAwesome
|
4
|
+
class Font
|
5
|
+
include Singleton
|
6
|
+
|
7
|
+
ASCENT = 1569
|
8
|
+
DESCENT = -430
|
9
|
+
|
10
|
+
def ascent
|
11
|
+
ASCENT
|
12
|
+
end
|
13
|
+
|
14
|
+
def descent
|
15
|
+
DESCENT
|
16
|
+
end
|
17
|
+
|
18
|
+
def em_size
|
19
|
+
attribute("units-per-em", "font-face").to_i
|
20
|
+
end
|
21
|
+
|
22
|
+
def character_width(hex_code)
|
23
|
+
(attribute("horiz-adv-x", glyph(hex_code)) || attribute("horiz-adv-x", "font")).to_i
|
24
|
+
end
|
25
|
+
|
26
|
+
def character_outline(hex_code)
|
27
|
+
attribute("d", glyph(hex_code))
|
28
|
+
end
|
29
|
+
|
30
|
+
protected
|
31
|
+
|
32
|
+
def glyph(hex_code)
|
33
|
+
"glyph[unicode=#{hex_code.to_unicode}]"
|
34
|
+
end
|
35
|
+
|
36
|
+
def attribute(attribute_name, selector)
|
37
|
+
select(selector)[attribute_name]
|
38
|
+
end
|
39
|
+
|
40
|
+
def select(selector)
|
41
|
+
svg.at_css(selector)
|
42
|
+
end
|
43
|
+
|
44
|
+
def svg
|
45
|
+
@svg ||= File.open(path) {|file| Nokogiri.XML(file)}
|
46
|
+
end
|
47
|
+
|
48
|
+
def path
|
49
|
+
File.expand_path "../../vendor/assets/font/fontawesome-webfont.svg", File.dirname(__FILE__)
|
50
|
+
end
|
51
|
+
end
|
52
|
+
end
|
@@ -0,0 +1,39 @@
|
|
1
|
+
module FontAwesome
|
2
|
+
class HexCode
|
3
|
+
HEX_CODES = {"glass"=>"f000", "music"=>"f001", "search"=>"f002", "envelope"=>"f003", "heart"=>"f004", "star"=>"f005", "star-empty"=>"f006", "user"=>"f007", "film"=>"f008", "th-large"=>"f009", "th"=>"f00a", "th-list"=>"f00b", "ok"=>"f00c", "remove"=>"f00d", "zoom-in"=>"f00e", "zoom-out"=>"f010", "off"=>"f011", "signal"=>"f012", "cog"=>"f013", "trash"=>"f014", "home"=>"f015", "file"=>"f016", "time"=>"f017", "road"=>"f018", "download-alt"=>"f019", "download"=>"f01a", "upload"=>"f01b", "inbox"=>"f01c", "play-circle"=>"f01d", "repeat"=>"f01e", "refresh"=>"f021", "list-alt"=>"f022", "lock"=>"f023", "flag"=>"f024", "headphones"=>"f025", "volume-off"=>"f026", "volume-down"=>"f027", "volume-up"=>"f028", "qrcode"=>"f029", "barcode"=>"f02a", "tag"=>"f02b", "tags"=>"f02c", "book"=>"f02d", "bookmark"=>"f02e", "print"=>"f02f", "camera"=>"f030", "font"=>"f031", "bold"=>"f032", "italic"=>"f033", "text-height"=>"f034", "text-width"=>"f035", "align-left"=>"f036", "align-center"=>"f037", "align-right"=>"f038", "align-justify"=>"f039", "list"=>"f03a", "indent-left"=>"f03b", "indent-right"=>"f03c", "facetime-video"=>"f03d", "picture"=>"f03e", "pencil"=>"f040", "map-marker"=>"f041", "adjust"=>"f042", "tint"=>"f043", "edit"=>"f044", "share"=>"f045", "check"=>"f046", "move"=>"f047", "step-backward"=>"f048", "fast-backward"=>"f049", "backward"=>"f04a", "play"=>"f04b", "pause"=>"f04c", "stop"=>"f04d", "forward"=>"f04e", "fast-forward"=>"f050", "step-forward"=>"f051", "eject"=>"f052", "chevron-left"=>"f053", "chevron-right"=>"f054", "plus-sign"=>"f055", "minus-sign"=>"f056", "remove-sign"=>"f057", "ok-sign"=>"f058", "question-sign"=>"f059", "info-sign"=>"f05a", "screenshot"=>"f05b", "remove-circle"=>"f05c", "ok-circle"=>"f05d", "ban-circle"=>"f05e", "arrow-left"=>"f060", "arrow-right"=>"f061", "arrow-up"=>"f062", "arrow-down"=>"f063", "share-alt"=>"f064", "resize-full"=>"f065", "resize-small"=>"f066", "plus"=>"f067", "minus"=>"f068", "asterisk"=>"f069", "exclamation-sign"=>"f06a", "gift"=>"f06b", "leaf"=>"f06c", "fire"=>"f06d", "eye-open"=>"f06e", "eye-close"=>"f070", "warning-sign"=>"f071", "plane"=>"f072", "calendar"=>"f073", "random"=>"f074", "comment"=>"f075", "magnet"=>"f076", "chevron-up"=>"f077", "chevron-down"=>"f078", "retweet"=>"f079", "shopping-cart"=>"f07a", "folder-close"=>"f07b", "folder-open"=>"f07c", "resize-vertical"=>"f07d", "resize-horizontal"=>"f07e", "bar-chart"=>"f080", "twitter-sign"=>"f081", "facebook-sign"=>"f082", "camera-retro"=>"f083", "key"=>"f084", "cogs"=>"f085", "comments"=>"f086", "thumbs-up"=>"f087", "thumbs-down"=>"f088", "star-half"=>"f089", "heart-empty"=>"f08a", "signout"=>"f08b", "linkedin-sign"=>"f08c", "pushpin"=>"f08d", "external-link"=>"f08e", "signin"=>"f090", "trophy"=>"f091", "github-sign"=>"f092", "upload-alt"=>"f093", "lemon"=>"f094", "phone"=>"f095", "check-empty"=>"f096", "bookmark-empty"=>"f097", "phone-sign"=>"f098", "twitter"=>"f099", "facebook"=>"f09a", "github"=>"f09b", "unlock"=>"f09c", "credit-card"=>"f09d", "rss"=>"f09e", "hdd"=>"f0a0", "bullhorn"=>"f0a1", "bell"=>"f0a2", "certificate"=>"f0a3", "hand-right"=>"f0a4", "hand-left"=>"f0a5", "hand-up"=>"f0a6", "hand-down"=>"f0a7", "circle-arrow-left"=>"f0a8", "circle-arrow-right"=>"f0a9", "circle-arrow-up"=>"f0aa", "circle-arrow-down"=>"f0ab", "globe"=>"f0ac", "wrench"=>"f0ad", "tasks"=>"f0ae", "filter"=>"f0b0", "briefcase"=>"f0b1", "fullscreen"=>"f0b2", "group"=>"f0c0", "link"=>"f0c1", "cloud"=>"f0c2", "beaker"=>"f0c3", "cut"=>"f0c4", "copy"=>"f0c5", "paper-clip"=>"f0c6", "save"=>"f0c7", "sign-blank"=>"f0c8", "reorder"=>"f0c9", "list-ul"=>"f0ca", "list-ol"=>"f0cb", "strikethrough"=>"f0cc", "underline"=>"f0cd", "table"=>"f0ce", "magic"=>"f0d0", "truck"=>"f0d1", "pinterest"=>"f0d2", "pinterest-sign"=>"f0d3", "google-plus-sign"=>"f0d4", "google-plus"=>"f0d5", "money"=>"f0d6", "caret-down"=>"f0d7", "caret-up"=>"f0d8", "caret-left"=>"f0d9", "caret-right"=>"f0da", "columns"=>"f0db", "sort"=>"f0dc", "sort-down"=>"f0dd", "sort-up"=>"f0de", "envelope-alt"=>"f0e0", "linkedin"=>"f0e1", "undo"=>"f0e2", "legal"=>"f0e3", "dashboard"=>"f0e4", "comment-alt"=>"f0e5", "comments-alt"=>"f0e6", "bolt"=>"f0e7", "sitemap"=>"f0e8", "umbrella"=>"f0e9", "paste"=>"f0ea", "user-md"=>"f200"}.freeze
|
4
|
+
|
5
|
+
attr_accessor :name
|
6
|
+
|
7
|
+
def initialize(name)
|
8
|
+
self.name = name
|
9
|
+
end
|
10
|
+
|
11
|
+
def name=(value)
|
12
|
+
@name = value.to_s.gsub("_", "-")
|
13
|
+
end
|
14
|
+
|
15
|
+
def to_s
|
16
|
+
self.class.lookup_table[name]
|
17
|
+
end
|
18
|
+
|
19
|
+
def to_unicode
|
20
|
+
[to_s.hex].pack("U")
|
21
|
+
end
|
22
|
+
|
23
|
+
def to_css
|
24
|
+
"\\#{to_s}"
|
25
|
+
end
|
26
|
+
|
27
|
+
def to_xml
|
28
|
+
"&#x#{to_s};"
|
29
|
+
end
|
30
|
+
|
31
|
+
def self.all
|
32
|
+
lookup_table.each
|
33
|
+
end
|
34
|
+
|
35
|
+
def self.lookup_table
|
36
|
+
HEX_CODES
|
37
|
+
end
|
38
|
+
end
|
39
|
+
end
|
@@ -0,0 +1,80 @@
|
|
1
|
+
module FontAwesome
|
2
|
+
class Icon
|
3
|
+
attr_accessor :style
|
4
|
+
attr_reader :hex_code, :font
|
5
|
+
|
6
|
+
def initialize(name)
|
7
|
+
@hex_code = HexCode.new(name)
|
8
|
+
@font = Font.instance
|
9
|
+
@style = default_style
|
10
|
+
end
|
11
|
+
|
12
|
+
def name
|
13
|
+
hex_code.name
|
14
|
+
end
|
15
|
+
|
16
|
+
def to_svg
|
17
|
+
Nokogiri::XML::Builder.new do |xml|
|
18
|
+
build_svg(xml)
|
19
|
+
end.to_xml(save_with: Nokogiri::XML::Node::SaveOptions::AS_XML | Nokogiri::XML::Node::SaveOptions::NO_DECLARATION).strip
|
20
|
+
end
|
21
|
+
|
22
|
+
def to_uri
|
23
|
+
"data:image/svg+xml,#{URI.escape(to_svg)}"
|
24
|
+
end
|
25
|
+
|
26
|
+
def self.all
|
27
|
+
HexCode.all.map {|name, code| new name }
|
28
|
+
end
|
29
|
+
|
30
|
+
protected
|
31
|
+
|
32
|
+
def default_style
|
33
|
+
"fill:black"
|
34
|
+
end
|
35
|
+
|
36
|
+
def view_box
|
37
|
+
"#{-offset_x} #{-offset_y} #{font.em_size} #{font.em_size}"
|
38
|
+
end
|
39
|
+
|
40
|
+
def offset_x
|
41
|
+
(font.em_size - width) / 2.0
|
42
|
+
end
|
43
|
+
|
44
|
+
def offset_y
|
45
|
+
font.ascent
|
46
|
+
end
|
47
|
+
|
48
|
+
def width
|
49
|
+
font.character_width(hex_code)
|
50
|
+
end
|
51
|
+
|
52
|
+
def path
|
53
|
+
font.character_outline(hex_code)
|
54
|
+
end
|
55
|
+
|
56
|
+
def build_svg(xml)
|
57
|
+
xml.svg svg_attributes do
|
58
|
+
xml.path path_attributes
|
59
|
+
end
|
60
|
+
end
|
61
|
+
|
62
|
+
def svg_attributes
|
63
|
+
{
|
64
|
+
xmlns: "http://www.w3.org/2000/svg",
|
65
|
+
version: "1.1",
|
66
|
+
width: "100px",
|
67
|
+
height: "100px",
|
68
|
+
viewBox: view_box
|
69
|
+
}
|
70
|
+
end
|
71
|
+
|
72
|
+
def path_attributes
|
73
|
+
{
|
74
|
+
d: path,
|
75
|
+
style: style,
|
76
|
+
transform: "rotate(180) scale(-1,1)"
|
77
|
+
}
|
78
|
+
end
|
79
|
+
end
|
80
|
+
end
|