fontello_rails_converter 0.3.3 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +5 -0
  3. data/bin/fontello +3 -3
  4. data/fontello_rails_converter.gemspec +1 -0
  5. data/lib/fontello_rails_converter/cli.rb +52 -23
  6. data/lib/fontello_rails_converter/version.rb +1 -1
  7. data/lib/fontello_rails_converter.rb +2 -0
  8. data/spec/cli_spec.rb +52 -0
  9. data/spec/fixtures/converted/fontello-demo.html +432 -0
  10. data/spec/fixtures/fontello-demo.html +432 -0
  11. data/spec/spec_helper.rb +0 -1
  12. metadata +23 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: ed460adb0062827467818aa88c323b737238f047
4
- data.tar.gz: 4af10b74d95726d2e4972958f4cabe9dfa4166d7
3
+ metadata.gz: abdcf7343cc9d7f66ce7ce34fb21014f55ff4a51
4
+ data.tar.gz: e58cdb33a77d9dbda843378079739c3429f5081f
5
5
  SHA512:
6
- metadata.gz: acc0090ac6d515be18ab1c28b3dc828a435cf01f49cc8ebb8a6230a89ea96846a2955e9648fb68c27fe2502fa60f2b9618679a0823f1b409ea5d1235f95b5cc8
7
- data.tar.gz: 6920544ddf6b184a0da78186cf0d0f33c40983ba6b290808fab4879a0bf84d60c0c384b264032cac6060178756ab07127a9b2f875cdf56b2d7e7b0ade17b618c
6
+ metadata.gz: bc89a7f0563e879ceb8fa214890500ff92e1d4c3df0d3b9e8011393aa06b0cf52c2e06c8eebfdb987135297f0494c8897a29af8320fd6a07010a74f4a2706115
7
+ data.tar.gz: 5e84b26ebfc5a64b4094dd0a335ddac451c0d41fea50c7dc29a3187d668f9507c3fa94e1ce8ee9903a7fbc23671be27dc70484d9ae290114c3ecb0dcbae472aa
data/CHANGELOG.md CHANGED
@@ -1,6 +1,11 @@
1
+ # 0.4.0
2
+
3
+ * added new `copy` command for cases where you don't want to convert assets
4
+
1
5
  # 0.3.3
2
6
 
3
7
  * [improvement] changed default stylesheet file extension from `.css.scss` to `.scss` because of recent change in `sass-rails` (see #26)
8
+ * [bugfix] fixed stylesheet extension option parsing #25
4
9
 
5
10
  # 0.3.2
6
11
 
data/bin/fontello CHANGED
@@ -44,7 +44,7 @@ set_options_from_file(options)
44
44
  OptionParser.new do |opts|
45
45
  opts.banner = "Usage: fontello COMMAND [options]\n\n"
46
46
 
47
- opts.separator "Available commands: open, convert, download\n\n"
47
+ opts.separator "Available commands: open, convert, copy, download\n\n"
48
48
 
49
49
  opts.separator "Global options:"
50
50
 
@@ -126,8 +126,8 @@ OptionParser.new do |opts|
126
126
  end.parse!
127
127
 
128
128
 
129
- unless ["open", "download", "convert"].include?(command)
130
- puts "available commands: open, download, convert"
129
+ unless ["open", "download", "convert", "copy"].include?(command)
130
+ puts "available commands: open, download, convert, copy"
131
131
  exit
132
132
  end
133
133
 
data/fontello_rails_converter.gemspec CHANGED
@@ -21,4 +21,5 @@ Gem::Specification.new do |spec|
21
21
  spec.add_runtime_dependency "rubyzip", "~> 1.0"
22
22
  spec.add_runtime_dependency "launchy"
23
23
  spec.add_runtime_dependency "rest-client"
24
+ spec.add_runtime_dependency "activesupport"
24
25
  end
data/lib/fontello_rails_converter/cli.rb CHANGED
@@ -33,28 +33,36 @@ module FontelloRailsConverter
33
33
  puts green "Downloaded '#{@options[:zip_file]}' from fontello (#{@fontello_api.session_url})"
34
34
  end
35
35
 
36
- def convert
36
+ def copy
37
37
  if @options[:no_download] == true
38
38
  puts "Use existing '#{@options[:zip_file]}' file due to `--no-download` switch"
39
39
  else
40
- self.download
40
+ download
41
41
  end
42
42
 
43
- puts "---- convert -----"
43
+ puts "---- copy -----"
44
44
  prepare_directories
45
45
 
46
46
  if zip_file_exists?
47
47
  Zip::File.open(@options[:zip_file]) do |zipfile|
48
48
  grouped_files = zipfile.group_by{ |file| file.to_s.split("/")[1] }
49
49
 
50
- copy_and_convert_stylesheets(zipfile, grouped_files['css'])
50
+ copy_stylesheets(zipfile, grouped_files['css'])
51
51
  copy_font_files(zipfile, grouped_files['font'])
52
52
  copy_config_json(zipfile, grouped_files['config.json'].first)
53
- copy_and_convert_icon_guide(zipfile, grouped_files['demo.html'].first)
53
+ copy_icon_guide(zipfile, grouped_files['demo.html'].first)
54
54
  end
55
55
  end
56
56
  end
57
57
 
58
+ def convert
59
+ copy
60
+
61
+ puts "---- convert -----"
62
+ convert_main_stylesheet
63
+ convert_icon_guide
64
+ end
65
+
58
66
  private
59
67
 
60
68
  def prepare_directories
@@ -64,7 +72,9 @@ module FontelloRailsConverter
64
72
  FileUtils.mkdir_p @options[:icon_guide_dir]
65
73
  end
66
74
 
67
- def convert_main_stylesheet(content)
75
+ def convert_main_stylesheet
76
+ content = File.read(main_stylesheet_file).encode('UTF-8', 'binary', invalid: :replace, undef: :replace, replace: '')
77
+
68
78
  # asset URLs
69
79
  content.gsub! /\.\.\/font\//, ""
70
80
  content.gsub!(/url\(([^\(]+)\)/) { |m| "font-url(#{$1})" }
@@ -86,7 +96,9 @@ module FontelloRailsConverter
86
96
  end
87
97
  end
88
98
 
89
- return content
99
+ target_file = main_stylesheet_file(extension: @options[:stylesheet_extension])
100
+ File.open(target_file, 'w') { |f| f.write(content) }
101
+ puts green("Created #{target_file} for Sass & asset pipeline")
90
102
  end
91
103
 
92
104
  def copy_font_files(zipfile, files)
@@ -107,38 +119,40 @@ module FontelloRailsConverter
107
119
  puts green("Copied #{target_file}")
108
120
  end
109
121
 
110
- def copy_and_convert_stylesheets(zipfile, files)
122
+ def copy_stylesheets(zipfile, files)
111
123
  puts "stylesheets:"
112
124
  files.select{ |file| file.to_s.end_with?('.css') }.each do |file|
113
125
  filename = file.to_s.split("/").last
114
126
 
115
127
  # extract stylesheet to target location
116
- target_file = File.join @options[:stylesheet_dir], filename.gsub('.css', @options[:stylesheet_extension])
128
+ target_file = File.join @options[:stylesheet_dir], filename
117
129
  zipfile.extract(file, target_file) { true }
118
130
  puts green("Copied #{target_file}")
119
-
120
- if !filename.end_with? "animation.css", "-ie7.css", "-codes.css", "-ie7-codes.css", "-embedded.css"
121
- converted_css = convert_main_stylesheet File.read(target_file).encode('UTF-8', 'binary', invalid: :replace, undef: :replace, replace: '')
122
- File.open(target_file, 'w') { |f| f.write(converted_css) }
123
- puts green("Converted #{target_file} for Sass & asset pipeline")
124
- end
125
131
  end
126
132
  end
127
133
 
128
- def copy_and_convert_icon_guide(zipfile, demo_file)
134
+ def copy_icon_guide(zipfile, demo_file)
129
135
  puts "icon guide (demo.html):"
130
136
 
131
- target_file = File.join @options[:icon_guide_dir], "fontello-demo.html"
132
- zipfile.extract(demo_file, target_file) { true }
133
- puts green("Copied #{target_file}")
137
+ zipfile.extract(demo_file, icon_guide_target_file) { true }
138
+ puts green("Copied #{icon_guide_target_file}")
139
+ end
140
+
141
+ def convert_icon_guide
142
+ content = File.read(icon_guide_target_file)
143
+ File.open(icon_guide_target_file, 'w') do |f|
144
+ f.write self.class.convert_icon_guide_html(content)
145
+ end
146
+ puts green("Converted demo.html for asset pipeline: #{icon_guide_target_file}")
147
+ end
134
148
 
135
- converted_html = File.read(target_file).gsub! /css\//, "/assets/"
136
- File.open(target_file, 'w') { |f| f.write(converted_html) }
137
- puts green("Converted demo.html for asset pipeline")
149
+ def self.convert_icon_guide_html(content)
150
+ content.gsub! /css\//, "/assets/"
151
+ content.gsub! "url('./font/", "url('/assets/"
138
152
  end
139
153
 
140
154
  def config_file_exists?
141
- if File.exist?(@options[:config_file])
155
+ if @options[:config_file] && File.exist?(@options[:config_file])
142
156
  true
143
157
  else
144
158
  puts red("missing config file: #{@options[:config_file]}")
@@ -157,5 +171,20 @@ module FontelloRailsConverter
157
171
  end
158
172
  end
159
173
 
174
+ def icon_guide_target_file
175
+ @_icon_guide_target_file ||= File.join(@options[:icon_guide_dir], "fontello-demo.html")
176
+ end
177
+
178
+ def main_stylesheet_file(extension: '.css')
179
+ if fontello_name.present? && @options[:stylesheet_dir].present?
180
+ File.join(@options[:stylesheet_dir], "#{fontello_name}#{extension}")
181
+ end
182
+ end
183
+
184
+ def fontello_name
185
+ @_fontello_name ||= if config_file_exists?
186
+ JSON.parse(File.read(@options[:config_file]))['name']
187
+ end
188
+ end
160
189
  end
161
190
  end
data/lib/fontello_rails_converter/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module FontelloRailsConverter
2
- VERSION = "0.3.3"
2
+ VERSION = "0.4.0"
3
3
  end
data/lib/fontello_rails_converter.rb CHANGED
@@ -1,3 +1,5 @@
1
+ require 'active_support/core_ext/string'
2
+
1
3
  require "fontello_rails_converter/version"
2
4
  require "fontello_rails_converter/colorized_output"
3
5
  require "fontello_rails_converter/fontello_api"
data/spec/cli_spec.rb ADDED
@@ -0,0 +1,52 @@
1
+ require 'spec_helper'
2
+
3
+ describe FontelloRailsConverter::Cli do
4
+ let(:cli) { described_class.new({
5
+ config_file: 'spec/fixtures/config.json',
6
+ stylesheet_dir: 'vendor/assets/stylesheets'
7
+ })
8
+ }
9
+
10
+ describe '.convert_icon_guide_html' do
11
+ let(:content) { File.read('spec/fixtures/fontello-demo.html') }
12
+ let(:converted_content) { File.read('spec/fixtures/converted/fontello-demo.html') }
13
+
14
+ specify do
15
+ expect(described_class.convert_icon_guide_html(content)).to eql converted_content
16
+ end
17
+ end
18
+
19
+ describe '#main_stylesheet_file' do
20
+ specify do
21
+ expect(cli.send(:main_stylesheet_file)).to eql 'vendor/assets/stylesheets/makerist.css'
22
+ end
23
+
24
+ context '.scss extension' do
25
+ specify do
26
+ expect(cli.send(:main_stylesheet_file, extension: '.scss')).to eql 'vendor/assets/stylesheets/makerist.scss'
27
+ end
28
+ end
29
+ end
30
+
31
+ describe '#fontello_name' do
32
+ context 'no config_file set' do
33
+ let(:cli) { described_class.new({}) }
34
+ specify do
35
+ expect(cli.send(:fontello_name)).to eql nil
36
+ end
37
+ end
38
+
39
+ context 'config file doesnt exist' do
40
+ let(:cli) { described_class.new(config_file: 'foo') }
41
+ specify do
42
+ expect(cli.send(:fontello_name)).to eql nil
43
+ end
44
+ end
45
+
46
+ context 'correct config file' do
47
+ specify do
48
+ expect(cli.send(:fontello_name)).to eql 'makerist'
49
+ end
50
+ end
51
+ end
52
+ end
data/spec/fixtures/converted/fontello-demo.html ADDED
@@ -0,0 +1,432 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
4
+ <meta charset="UTF-8"><style>/*
5
+ * Bootstrap v2.2.1
6
+ *
7
+ * Copyright 2012 Twitter, Inc
8
+ * Licensed under the Apache License v2.0
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
12
+ */
13
+ .clearfix {
14
+ *zoom: 1;
15
+ }
16
+ .clearfix:before,
17
+ .clearfix:after {
18
+ display: table;
19
+ content: "";
20
+ line-height: 0;
21
+ }
22
+ .clearfix:after {
23
+ clear: both;
24
+ }
25
+ html {
26
+ font-size: 100%;
27
+ -webkit-text-size-adjust: 100%;
28
+ -ms-text-size-adjust: 100%;
29
+ }
30
+ a:focus {
31
+ outline: thin dotted #333;
32
+ outline: 5px auto -webkit-focus-ring-color;
33
+ outline-offset: -2px;
34
+ }
35
+ a:hover,
36
+ a:active {
37
+ outline: 0;
38
+ }
39
+ button,
40
+ input,
41
+ select,
42
+ textarea {
43
+ margin: 0;
44
+ font-size: 100%;
45
+ vertical-align: middle;
46
+ }
47
+ button,
48
+ input {
49
+ *overflow: visible;
50
+ line-height: normal;
51
+ }
52
+ button::-moz-focus-inner,
53
+ input::-moz-focus-inner {
54
+ padding: 0;
55
+ border: 0;
56
+ }
57
+ body {
58
+ margin: 0;
59
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
60
+ font-size: 14px;
61
+ line-height: 20px;
62
+ color: #333;
63
+ background-color: #fff;
64
+ }
65
+ a {
66
+ color: #08c;
67
+ text-decoration: none;
68
+ }
69
+ a:hover {
70
+ color: #005580;
71
+ text-decoration: underline;
72
+ }
73
+ .row {
74
+ margin-left: -20px;
75
+ *zoom: 1;
76
+ }
77
+ .row:before,
78
+ .row:after {
79
+ display: table;
80
+ content: "";
81
+ line-height: 0;
82
+ }
83
+ .row:after {
84
+ clear: both;
85
+ }
86
+ [class*="span"] {
87
+ float: left;
88
+ min-height: 1px;
89
+ margin-left: 20px;
90
+ }
91
+ .container,
92
+ .navbar-static-top .container,
93
+ .navbar-fixed-top .container,
94
+ .navbar-fixed-bottom .container {
95
+ width: 940px;
96
+ }
97
+ .span12 {
98
+ width: 940px;
99
+ }
100
+ .span11 {
101
+ width: 860px;
102
+ }
103
+ .span10 {
104
+ width: 780px;
105
+ }
106
+ .span9 {
107
+ width: 700px;
108
+ }
109
+ .span8 {
110
+ width: 620px;
111
+ }
112
+ .span7 {
113
+ width: 540px;
114
+ }
115
+ .span6 {
116
+ width: 460px;
117
+ }
118
+ .span5 {
119
+ width: 380px;
120
+ }
121
+ .span4 {
122
+ width: 300px;
123
+ }
124
+ .span3 {
125
+ width: 220px;
126
+ }
127
+ .span2 {
128
+ width: 140px;
129
+ }
130
+ .span1 {
131
+ width: 60px;
132
+ }
133
+ [class*="span"].pull-right,
134
+ .row-fluid [class*="span"].pull-right {
135
+ float: right;
136
+ }
137
+ .container {
138
+ margin-right: auto;
139
+ margin-left: auto;
140
+ *zoom: 1;
141
+ }
142
+ .container:before,
143
+ .container:after {
144
+ display: table;
145
+ content: "";
146
+ line-height: 0;
147
+ }
148
+ .container:after {
149
+ clear: both;
150
+ }
151
+ p {
152
+ margin: 0 0 10px;
153
+ }
154
+ .lead {
155
+ margin-bottom: 20px;
156
+ font-size: 21px;
157
+ font-weight: 200;
158
+ line-height: 30px;
159
+ }
160
+ small {
161
+ font-size: 85%;
162
+ }
163
+ h1 {
164
+ margin: 10px 0;
165
+ font-family: inherit;
166
+ font-weight: bold;
167
+ line-height: 20px;
168
+ color: inherit;
169
+ text-rendering: optimizelegibility;
170
+ }
171
+ h1 small {
172
+ font-weight: normal;
173
+ line-height: 1;
174
+ color: #999;
175
+ }
176
+ h1 {
177
+ line-height: 40px;
178
+ }
179
+ h1 {
180
+ font-size: 38.5px;
181
+ }
182
+ h1 small {
183
+ font-size: 24.5px;
184
+ }
185
+ body {
186
+ margin-top: 90px;
187
+ }
188
+ .header {
189
+ position: fixed;
190
+ top: 0;
191
+ left: 50%;
192
+ margin-left: -480px;
193
+ background-color: #fff;
194
+ border-bottom: 1px solid #ddd;
195
+ padding-top: 10px;
196
+ z-index: 10;
197
+ }
198
+ .footer {
199
+ color: #ddd;
200
+ font-size: 12px;
201
+ text-align: center;
202
+ margin-top: 20px;
203
+ }
204
+ .footer a {
205
+ color: #ccc;
206
+ text-decoration: underline;
207
+ }
208
+ .the-icons {
209
+ font-size: 14px;
210
+ line-height: 24px;
211
+ }
212
+ .switch {
213
+ position: absolute;
214
+ right: 0;
215
+ bottom: 10px;
216
+ color: #666;
217
+ }
218
+ .switch input {
219
+ margin-right: 0.3em;
220
+ }
221
+ .codesOn .i-name {
222
+ display: none;
223
+ }
224
+ .codesOn .i-code {
225
+ display: inline;
226
+ }
227
+ .i-code {
228
+ display: none;
229
+ }
230
+ @font-face {
231
+ font-family: 'makerist';
232
+ src: url('/assets/makerist.eot?49463430');
233
+ src: url('/assets/makerist.eot?49463430#iefix') format('embedded-opentype'),
234
+ url('/assets/makerist.woff?49463430') format('woff'),
235
+ url('/assets/makerist.ttf?49463430') format('truetype'),
236
+ url('/assets/makerist.svg?49463430#makerist') format('svg');
237
+ font-weight: normal;
238
+ font-style: normal;
239
+ }
240
+
241
+
242
+ .demo-icon
243
+ {
244
+ font-family: "makerist";
245
+ font-style: normal;
246
+ font-weight: normal;
247
+ speak: none;
248
+
249
+ display: inline-block;
250
+ text-decoration: inherit;
251
+ width: 1em;
252
+ margin-right: .2em;
253
+ text-align: center;
254
+ /* opacity: .8; */
255
+
256
+ /* For safety - reset parent styles, that can break glyph codes*/
257
+ font-variant: normal;
258
+ text-transform: none;
259
+
260
+ /* fix buttons height, for twitter bootstrap */
261
+ line-height: 1em;
262
+
263
+ /* Animation center compensation - margins should be symmetric */
264
+ /* remove if not needed */
265
+ margin-left: .2em;
266
+
267
+ /* You can be more comfortable with increased icons size */
268
+ /* font-size: 120%; */
269
+
270
+ /* Font smoothing. That was taken from TWBS */
271
+ -webkit-font-smoothing: antialiased;
272
+ -moz-osx-font-smoothing: grayscale;
273
+
274
+ /* Uncomment for 3D effect */
275
+ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
276
+ }
277
+ </style>
278
+ <link rel="stylesheet" href="/assets/animation.css"><!--[if IE 7]><link rel="stylesheet" href="/assets/makerist-ie7.css"><![endif]-->
279
+ <script>
280
+ function toggleCodes(on) {
281
+ var obj = document.getElementById('icons');
282
+
283
+ if (on) {
284
+ obj.className += ' codesOn';
285
+ } else {
286
+ obj.className = obj.className.replace(' codesOn', '');
287
+ }
288
+ }
289
+
290
+ </script>
291
+ </head>
292
+ <body>
293
+ <div class="container header">
294
+ <h1>
295
+ makerist
296
+ <small>font demo</small>
297
+ </h1>
298
+ <label class="switch">
299
+ <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
300
+ </label>
301
+ </div>
302
+ <div id="icons" class="container">
303
+ <div class="row">
304
+ <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-mail-alt">&#xe800;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xe800</span></div>
305
+ <div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-search">&#xe801;</i> <span class="i-name">icon-search</span><span class="i-code">0xe801</span></div>
306
+ <div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star">&#xe802;</i> <span class="i-name">icon-star</span><span class="i-code">0xe802</span></div>
307
+ <div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe803;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe803</span></div>
308
+ </div>
309
+ <div class="row">
310
+ <div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-star-half">&#xe804;</i> <span class="i-name">icon-star-half</span><span class="i-code">0xe804</span></div>
311
+ <div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-star-half-alt">&#xe805;</i> <span class="i-name">icon-star-half-alt</span><span class="i-code">0xe805</span></div>
312
+ <div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-play">&#xe806;</i> <span class="i-name">icon-play</span><span class="i-code">0xe806</span></div>
313
+ <div title="Code: 0xe807" class="the-icons span3"><i class="demo-icon icon-facebook-squared">&#xe807;</i> <span class="i-name">icon-facebook-squared</span><span class="i-code">0xe807</span></div>
314
+ </div>
315
+ <div class="row">
316
+ <div title="Code: 0xe808" class="the-icons span3"><i class="demo-icon icon-basket">&#xe808;</i> <span class="i-name">icon-basket</span><span class="i-code">0xe808</span></div>
317
+ <div title="Code: 0xe809" class="the-icons span3"><i class="demo-icon icon-pinterest-squared">&#xe809;</i> <span class="i-name">icon-pinterest-squared</span><span class="i-code">0xe809</span></div>
318
+ <div title="Code: 0xe80a" class="the-icons span3"><i class="demo-icon icon-up-open-big">&#xe80a;</i> <span class="i-name">icon-up-open-big</span><span class="i-code">0xe80a</span></div>
319
+ <div title="Code: 0xe80b" class="the-icons span3"><i class="demo-icon icon-play-circled2">&#xe80b;</i> <span class="i-name">icon-play-circled2</span><span class="i-code">0xe80b</span></div>
320
+ </div>
321
+ <div class="row">
322
+ <div title="Code: 0xe80c" class="the-icons span3"><i class="demo-icon icon-check">&#xe80c;</i> <span class="i-name">icon-check</span><span class="i-code">0xe80c</span></div>
323
+ <div title="Code: 0xe80d" class="the-icons span3"><i class="demo-icon icon-left-open">&#xe80d;</i> <span class="i-name">icon-left-open</span><span class="i-code">0xe80d</span></div>
324
+ <div title="Code: 0xe80e" class="the-icons span3"><i class="demo-icon icon-right-open">&#xe80e;</i> <span class="i-name">icon-right-open</span><span class="i-code">0xe80e</span></div>
325
+ <div title="Code: 0xe80f" class="the-icons span3"><i class="demo-icon icon-right-big">&#xe80f;</i> <span class="i-name">icon-right-big</span><span class="i-code">0xe80f</span></div>
326
+ </div>
327
+ <div class="row">
328
+ <div title="Code: 0xe810" class="the-icons span3"><i class="demo-icon icon-twitter-squared">&#xe810;</i> <span class="i-name">icon-twitter-squared</span><span class="i-code">0xe810</span></div>
329
+ <div title="Code: 0xe811" class="the-icons span3"><i class="demo-icon icon-cancel">&#xe811;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe811</span></div>
330
+ <div title="Code: 0xe812" class="the-icons span3"><i class="demo-icon icon-eye">&#xe812;</i> <span class="i-name">icon-eye</span><span class="i-code">0xe812</span></div>
331
+ <div title="Code: 0xe813" class="the-icons span3"><i class="demo-icon icon-eye-off">&#xe813;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe813</span></div>
332
+ </div>
333
+ <div class="row">
334
+ <div title="Code: 0xe814" class="the-icons span3"><i class="demo-icon icon-female">&#xe814;</i> <span class="i-name">icon-female</span><span class="i-code">0xe814</span></div>
335
+ <div title="Code: 0xe815" class="the-icons span3"><i class="demo-icon icon-male">&#xe815;</i> <span class="i-name">icon-male</span><span class="i-code">0xe815</span></div>
336
+ <div title="Code: 0xe816" class="the-icons span3"><i class="demo-icon icon-down-dir">&#xe816;</i> <span class="i-name">icon-down-dir</span><span class="i-code">0xe816</span></div>
337
+ <div title="Code: 0xe817" class="the-icons span3"><i class="demo-icon icon-comment-empty">&#xe817;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xe817</span></div>
338
+ </div>
339
+ <div class="row">
340
+ <div title="Code: 0xe818" class="the-icons span3"><i class="demo-icon icon-attach">&#xe818;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe818</span></div>
341
+ <div title="Code: 0xe819" class="the-icons span3"><i class="demo-icon icon-upload-cloud">&#xe819;</i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe819</span></div>
342
+ <div title="Code: 0xe81a" class="the-icons span3"><i class="demo-icon icon-heart">&#xe81a;</i> <span class="i-name">icon-heart</span><span class="i-code">0xe81a</span></div>
343
+ <div title="Code: 0xe81b" class="the-icons span3"><i class="demo-icon icon-resize-small">&#xe81b;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe81b</span></div>
344
+ </div>
345
+ <div class="row">
346
+ <div title="Code: 0xe81c" class="the-icons span3"><i class="demo-icon icon-menu">&#xe81c;</i> <span class="i-name">icon-menu</span><span class="i-code">0xe81c</span></div>
347
+ <div title="Code: 0xe81d" class="the-icons span3"><i class="demo-icon icon-chat-empty">&#xe81d;</i> <span class="i-name">icon-chat-empty</span><span class="i-code">0xe81d</span></div>
348
+ <div title="Code: 0xe81e" class="the-icons span3"><i class="demo-icon icon-camera">&#xe81e;</i> <span class="i-name">icon-camera</span><span class="i-code">0xe81e</span></div>
349
+ <div title="Code: 0xe81f" class="the-icons span3"><i class="demo-icon icon-cancel-circled">&#xe81f;</i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe81f</span></div>
350
+ </div>
351
+ <div class="row">
352
+ <div title="Code: 0xe820" class="the-icons span3"><i class="demo-icon icon-plus">&#xe820;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe820</span></div>
353
+ <div title="Code: 0xe821" class="the-icons span3"><i class="demo-icon icon-info-circled">&#xe821;</i> <span class="i-name">icon-info-circled</span><span class="i-code">0xe821</span></div>
354
+ <div title="Code: 0xe822" class="the-icons span3"><i class="demo-icon icon-heart-empty">&#xe822;</i> <span class="i-name">icon-heart-empty</span><span class="i-code">0xe822</span></div>
355
+ <div title="Code: 0xe823" class="the-icons span3"><i class="demo-icon icon-download-cloud">&#xe823;</i> <span class="i-name">icon-download-cloud</span><span class="i-code">0xe823</span></div>
356
+ </div>
357
+ <div class="row">
358
+ <div title="Code: 0xe824" class="the-icons span3"><i class="demo-icon icon-trash">&#xe824;</i> <span class="i-name">icon-trash</span><span class="i-code">0xe824</span></div>
359
+ <div title="Code: 0xe825" class="the-icons span3"><i class="demo-icon icon-pencil">&#xe825;</i> <span class="i-name">icon-pencil</span><span class="i-code">0xe825</span></div>
360
+ <div title="Code: 0xe826" class="the-icons span3"><i class="demo-icon icon-ok">&#xe826;</i> <span class="i-name">icon-ok</span><span class="i-code">0xe826</span></div>
361
+ <div title="Code: 0xe827" class="the-icons span3"><i class="demo-icon icon-left-dir">&#xe827;</i> <span class="i-name">icon-left-dir</span><span class="i-code">0xe827</span></div>
362
+ </div>
363
+ <div class="row">
364
+ <div title="Code: 0xe828" class="the-icons span3"><i class="demo-icon icon-icon_play-01">&#xe828;</i> <span class="i-name">icon-icon_play-01</span><span class="i-code">0xe828</span></div>
365
+ <div title="Code: 0xe829" class="the-icons span3"><i class="demo-icon icon-right-dir">&#xe829;</i> <span class="i-name">icon-right-dir</span><span class="i-code">0xe829</span></div>
366
+ <div title="Code: 0xe82a" class="the-icons span3"><i class="demo-icon icon-down-open-big">&#xe82a;</i> <span class="i-name">icon-down-open-big</span><span class="i-code">0xe82a</span></div>
367
+ <div title="Code: 0xe82b" class="the-icons span3"><i class="demo-icon icon-to-start">&#xe82b;</i> <span class="i-name">icon-to-start</span><span class="i-code">0xe82b</span></div>
368
+ </div>
369
+ <div class="row">
370
+ <div title="Code: 0xe82c" class="the-icons span3"><i class="demo-icon icon-to-end">&#xe82c;</i> <span class="i-name">icon-to-end</span><span class="i-code">0xe82c</span></div>
371
+ <div title="Code: 0xe82d" class="the-icons span3"><i class="demo-icon icon-link">&#xe82d;</i> <span class="i-name">icon-link</span><span class="i-code">0xe82d</span></div>
372
+ <div title="Code: 0xe82e" class="the-icons span3"><i class="demo-icon icon-bleach">&#xe82e;</i> <span class="i-name">icon-bleach</span><span class="i-code">0xe82e</span></div>
373
+ <div title="Code: 0xe82f" class="the-icons span3"><i class="demo-icon icon-clorine_bleach">&#xe82f;</i> <span class="i-name">icon-clorine_bleach</span><span class="i-code">0xe82f</span></div>
374
+ </div>
375
+ <div class="row">
376
+ <div title="Code: 0xe830" class="the-icons span3"><i class="demo-icon icon-dry_clean">&#xe830;</i> <span class="i-name">icon-dry_clean</span><span class="i-code">0xe830</span></div>
377
+ <div title="Code: 0xe831" class="the-icons span3"><i class="demo-icon icon-dry_flat">&#xe831;</i> <span class="i-name">icon-dry_flat</span><span class="i-code">0xe831</span></div>
378
+ <div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-extra_gentle_wash_ninety_five_degrees">&#xe832;</i> <span class="i-name">icon-extra_gentle_wash_ninety_five_degrees</span><span class="i-code">0xe832</span></div>
379
+ <div title="Code: 0xe833" class="the-icons span3"><i class="demo-icon icon-extra_gentle_wash_fourty_degrees">&#xe833;</i> <span class="i-name">icon-extra_gentle_wash_fourty_degrees</span><span class="i-code">0xe833</span></div>
380
+ </div>
381
+ <div class="row">
382
+ <div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-extra_gentle_wash_sixty_degrees">&#xe834;</i> <span class="i-name">icon-extra_gentle_wash_sixty_degrees</span><span class="i-code">0xe834</span></div>
383
+ <div title="Code: 0xe835" class="the-icons span3"><i class="demo-icon icon-tumble_dry_medium_heat">&#xe835;</i> <span class="i-name">icon-tumble_dry_medium_heat</span><span class="i-code">0xe835</span></div>
384
+ <div title="Code: 0xe836" class="the-icons span3"><i class="demo-icon icon-wash_fourty_degrees">&#xe836;</i> <span class="i-name">icon-wash_fourty_degrees</span><span class="i-code">0xe836</span></div>
385
+ <div title="Code: 0xe837" class="the-icons span3"><i class="demo-icon icon-wash_ninety_five_degrees">&#xe837;</i> <span class="i-name">icon-wash_ninety_five_degrees</span><span class="i-code">0xe837</span></div>
386
+ </div>
387
+ <div class="row">
388
+ <div title="Code: 0xe838" class="the-icons span3"><i class="demo-icon icon-wash_sixty_degrees">&#xe838;</i> <span class="i-name">icon-wash_sixty_degrees</span><span class="i-code">0xe838</span></div>
389
+ <div title="Code: 0xe839" class="the-icons span3"><i class="demo-icon icon-wash_thrity_degrees">&#xe839;</i> <span class="i-name">icon-wash_thrity_degrees</span><span class="i-code">0xe839</span></div>
390
+ <div title="Code: 0xe83a" class="the-icons span3"><i class="demo-icon icon-wet_cleaning">&#xe83a;</i> <span class="i-name">icon-wet_cleaning</span><span class="i-code">0xe83a</span></div>
391
+ <div title="Code: 0xe83b" class="the-icons span3"><i class="demo-icon icon-iron_high_heat">&#xe83b;</i> <span class="i-name">icon-iron_high_heat</span><span class="i-code">0xe83b</span></div>
392
+ </div>
393
+ <div class="row">
394
+ <div title="Code: 0xe83c" class="the-icons span3"><i class="demo-icon icon-iron_low_heat">&#xe83c;</i> <span class="i-name">icon-iron_low_heat</span><span class="i-code">0xe83c</span></div>
395
+ <div title="Code: 0xe83d" class="the-icons span3"><i class="demo-icon icon-iron_medium_heat">&#xe83d;</i> <span class="i-name">icon-iron_medium_heat</span><span class="i-code">0xe83d</span></div>
396
+ <div title="Code: 0xe83e" class="the-icons span3"><i class="demo-icon icon-non_clorine_bleach">&#xe83e;</i> <span class="i-name">icon-non_clorine_bleach</span><span class="i-code">0xe83e</span></div>
397
+ <div title="Code: 0xe83f" class="the-icons span3"><i class="demo-icon icon-do_not_bleach">&#xe83f;</i> <span class="i-name">icon-do_not_bleach</span><span class="i-code">0xe83f</span></div>
398
+ </div>
399
+ <div class="row">
400
+ <div title="Code: 0xe840" class="the-icons span3"><i class="demo-icon icon-do_not_dry_clean">&#xe840;</i> <span class="i-name">icon-do_not_dry_clean</span><span class="i-code">0xe840</span></div>
401
+ <div title="Code: 0xe841" class="the-icons span3"><i class="demo-icon icon-do_not_iron">&#xe841;</i> <span class="i-name">icon-do_not_iron</span><span class="i-code">0xe841</span></div>
402
+ <div title="Code: 0xe842" class="the-icons span3"><i class="demo-icon icon-do_not_tumble_dry">&#xe842;</i> <span class="i-name">icon-do_not_tumble_dry</span><span class="i-code">0xe842</span></div>
403
+ <div title="Code: 0xe843" class="the-icons span3"><i class="demo-icon icon-do_not_wash">&#xe843;</i> <span class="i-name">icon-do_not_wash</span><span class="i-code">0xe843</span></div>
404
+ </div>
405
+ <div class="row">
406
+ <div title="Code: 0xe844" class="the-icons span3"><i class="demo-icon icon-perchloroethylene_solvent">&#xe844;</i> <span class="i-name">icon-perchloroethylene_solvent</span><span class="i-code">0xe844</span></div>
407
+ <div title="Code: 0xe845" class="the-icons span3"><i class="demo-icon icon-tumble_dry">&#xe845;</i> <span class="i-name">icon-tumble_dry</span><span class="i-code">0xe845</span></div>
408
+ <div title="Code: 0xe846" class="the-icons span3"><i class="demo-icon icon-tumble_dry_high_heat">&#xe846;</i> <span class="i-name">icon-tumble_dry_high_heat</span><span class="i-code">0xe846</span></div>
409
+ <div title="Code: 0xe847" class="the-icons span3"><i class="demo-icon icon-tumble_dry_low_heat">&#xe847;</i> <span class="i-name">icon-tumble_dry_low_heat</span><span class="i-code">0xe847</span></div>
410
+ </div>
411
+ <div class="row">
412
+ <div title="Code: 0xe848" class="the-icons span3"><i class="demo-icon icon-extra_gentle_wash_thrity_degrees">&#xe848;</i> <span class="i-name">icon-extra_gentle_wash_thrity_degrees</span><span class="i-code">0xe848</span></div>
413
+ <div title="Code: 0xe849" class="the-icons span3"><i class="demo-icon icon-general_dry">&#xe849;</i> <span class="i-name">icon-general_dry</span><span class="i-code">0xe849</span></div>
414
+ <div title="Code: 0xe84a" class="the-icons span3"><i class="demo-icon icon-gentle_hydrocarbon_solvent">&#xe84a;</i> <span class="i-name">icon-gentle_hydrocarbon_solvent</span><span class="i-code">0xe84a</span></div>
415
+ <div title="Code: 0xe84b" class="the-icons span3"><i class="demo-icon icon-gentle_perchloroethylene_solvent">&#xe84b;</i> <span class="i-name">icon-gentle_perchloroethylene_solvent</span><span class="i-code">0xe84b</span></div>
416
+ </div>
417
+ <div class="row">
418
+ <div title="Code: 0xe84c" class="the-icons span3"><i class="demo-icon icon-gentle_wash_fourty_degrees">&#xe84c;</i> <span class="i-name">icon-gentle_wash_fourty_degrees</span><span class="i-code">0xe84c</span></div>
419
+ <div title="Code: 0xe84d" class="the-icons span3"><i class="demo-icon icon-gentle_wash_ninety_five_degrees">&#xe84d;</i> <span class="i-name">icon-gentle_wash_ninety_five_degrees</span><span class="i-code">0xe84d</span></div>
420
+ <div title="Code: 0xe84e" class="the-icons span3"><i class="demo-icon icon-gentle_wash_sixty_degrees">&#xe84e;</i> <span class="i-name">icon-gentle_wash_sixty_degrees</span><span class="i-code">0xe84e</span></div>
421
+ <div title="Code: 0xe84f" class="the-icons span3"><i class="demo-icon icon-gentle_wash_thrity_degrees">&#xe84f;</i> <span class="i-name">icon-gentle_wash_thrity_degrees</span><span class="i-code">0xe84f</span></div>
422
+ </div>
423
+ <div class="row">
424
+ <div title="Code: 0xe850" class="the-icons span3"><i class="demo-icon icon-gentle_wet_cleaning">&#xe850;</i> <span class="i-name">icon-gentle_wet_cleaning</span><span class="i-code">0xe850</span></div>
425
+ <div title="Code: 0xe851" class="the-icons span3"><i class="demo-icon icon-hand_wash">&#xe851;</i> <span class="i-name">icon-hand_wash</span><span class="i-code">0xe851</span></div>
426
+ <div title="Code: 0xe852" class="the-icons span3"><i class="demo-icon icon-hydrocarbon_solvent">&#xe852;</i> <span class="i-name">icon-hydrocarbon_solvent</span><span class="i-code">0xe852</span></div>
427
+ <div title="Code: 0xe853" class="the-icons span3"><i class="demo-icon icon-iron">&#xe853;</i> <span class="i-name">icon-iron</span><span class="i-code">0xe853</span></div>
428
+ </div>
429
+ </div>
430
+ <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
431
+ </body>
432
+ </html>
data/spec/fixtures/fontello-demo.html ADDED
@@ -0,0 +1,432 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
4
+ <meta charset="UTF-8"><style>/*
5
+ * Bootstrap v2.2.1
6
+ *
7
+ * Copyright 2012 Twitter, Inc
8
+ * Licensed under the Apache License v2.0
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
12
+ */
13
+ .clearfix {
14
+ *zoom: 1;
15
+ }
16
+ .clearfix:before,
17
+ .clearfix:after {
18
+ display: table;
19
+ content: "";
20
+ line-height: 0;
21
+ }
22
+ .clearfix:after {
23
+ clear: both;
24
+ }
25
+ html {
26
+ font-size: 100%;
27
+ -webkit-text-size-adjust: 100%;
28
+ -ms-text-size-adjust: 100%;
29
+ }
30
+ a:focus {
31
+ outline: thin dotted #333;
32
+ outline: 5px auto -webkit-focus-ring-color;
33
+ outline-offset: -2px;
34
+ }
35
+ a:hover,
36
+ a:active {
37
+ outline: 0;
38
+ }
39
+ button,
40
+ input,
41
+ select,
42
+ textarea {
43
+ margin: 0;
44
+ font-size: 100%;
45
+ vertical-align: middle;
46
+ }
47
+ button,
48
+ input {
49
+ *overflow: visible;
50
+ line-height: normal;
51
+ }
52
+ button::-moz-focus-inner,
53
+ input::-moz-focus-inner {
54
+ padding: 0;
55
+ border: 0;
56
+ }
57
+ body {
58
+ margin: 0;
59
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
60
+ font-size: 14px;
61
+ line-height: 20px;
62
+ color: #333;
63
+ background-color: #fff;
64
+ }
65
+ a {
66
+ color: #08c;
67
+ text-decoration: none;
68
+ }
69
+ a:hover {
70
+ color: #005580;
71
+ text-decoration: underline;
72
+ }
73
+ .row {
74
+ margin-left: -20px;
75
+ *zoom: 1;
76
+ }
77
+ .row:before,
78
+ .row:after {
79
+ display: table;
80
+ content: "";
81
+ line-height: 0;
82
+ }
83
+ .row:after {
84
+ clear: both;
85
+ }
86
+ [class*="span"] {
87
+ float: left;
88
+ min-height: 1px;
89
+ margin-left: 20px;
90
+ }
91
+ .container,
92
+ .navbar-static-top .container,
93
+ .navbar-fixed-top .container,
94
+ .navbar-fixed-bottom .container {
95
+ width: 940px;
96
+ }
97
+ .span12 {
98
+ width: 940px;
99
+ }
100
+ .span11 {
101
+ width: 860px;
102
+ }
103
+ .span10 {
104
+ width: 780px;
105
+ }
106
+ .span9 {
107
+ width: 700px;
108
+ }
109
+ .span8 {
110
+ width: 620px;
111
+ }
112
+ .span7 {
113
+ width: 540px;
114
+ }
115
+ .span6 {
116
+ width: 460px;
117
+ }
118
+ .span5 {
119
+ width: 380px;
120
+ }
121
+ .span4 {
122
+ width: 300px;
123
+ }
124
+ .span3 {
125
+ width: 220px;
126
+ }
127
+ .span2 {
128
+ width: 140px;
129
+ }
130
+ .span1 {
131
+ width: 60px;
132
+ }
133
+ [class*="span"].pull-right,
134
+ .row-fluid [class*="span"].pull-right {
135
+ float: right;
136
+ }
137
+ .container {
138
+ margin-right: auto;
139
+ margin-left: auto;
140
+ *zoom: 1;
141
+ }
142
+ .container:before,
143
+ .container:after {
144
+ display: table;
145
+ content: "";
146
+ line-height: 0;
147
+ }
148
+ .container:after {
149
+ clear: both;
150
+ }
151
+ p {
152
+ margin: 0 0 10px;
153
+ }
154
+ .lead {
155
+ margin-bottom: 20px;
156
+ font-size: 21px;
157
+ font-weight: 200;
158
+ line-height: 30px;
159
+ }
160
+ small {
161
+ font-size: 85%;
162
+ }
163
+ h1 {
164
+ margin: 10px 0;
165
+ font-family: inherit;
166
+ font-weight: bold;
167
+ line-height: 20px;
168
+ color: inherit;
169
+ text-rendering: optimizelegibility;
170
+ }
171
+ h1 small {
172
+ font-weight: normal;
173
+ line-height: 1;
174
+ color: #999;
175
+ }
176
+ h1 {
177
+ line-height: 40px;
178
+ }
179
+ h1 {
180
+ font-size: 38.5px;
181
+ }
182
+ h1 small {
183
+ font-size: 24.5px;
184
+ }
185
+ body {
186
+ margin-top: 90px;
187
+ }
188
+ .header {
189
+ position: fixed;
190
+ top: 0;
191
+ left: 50%;
192
+ margin-left: -480px;
193
+ background-color: #fff;
194
+ border-bottom: 1px solid #ddd;
195
+ padding-top: 10px;
196
+ z-index: 10;
197
+ }
198
+ .footer {
199
+ color: #ddd;
200
+ font-size: 12px;
201
+ text-align: center;
202
+ margin-top: 20px;
203
+ }
204
+ .footer a {
205
+ color: #ccc;
206
+ text-decoration: underline;
207
+ }
208
+ .the-icons {
209
+ font-size: 14px;
210
+ line-height: 24px;
211
+ }
212
+ .switch {
213
+ position: absolute;
214
+ right: 0;
215
+ bottom: 10px;
216
+ color: #666;
217
+ }
218
+ .switch input {
219
+ margin-right: 0.3em;
220
+ }
221
+ .codesOn .i-name {
222
+ display: none;
223
+ }
224
+ .codesOn .i-code {
225
+ display: inline;
226
+ }
227
+ .i-code {
228
+ display: none;
229
+ }
230
+ @font-face {
231
+ font-family: 'makerist';
232
+ src: url('./font/makerist.eot?49463430');
233
+ src: url('./font/makerist.eot?49463430#iefix') format('embedded-opentype'),
234
+ url('./font/makerist.woff?49463430') format('woff'),
235
+ url('./font/makerist.ttf?49463430') format('truetype'),
236
+ url('./font/makerist.svg?49463430#makerist') format('svg');
237
+ font-weight: normal;
238
+ font-style: normal;
239
+ }
240
+
241
+
242
+ .demo-icon
243
+ {
244
+ font-family: "makerist";
245
+ font-style: normal;
246
+ font-weight: normal;
247
+ speak: none;
248
+
249
+ display: inline-block;
250
+ text-decoration: inherit;
251
+ width: 1em;
252
+ margin-right: .2em;
253
+ text-align: center;
254
+ /* opacity: .8; */
255
+
256
+ /* For safety - reset parent styles, that can break glyph codes*/
257
+ font-variant: normal;
258
+ text-transform: none;
259
+
260
+ /* fix buttons height, for twitter bootstrap */
261
+ line-height: 1em;
262
+
263
+ /* Animation center compensation - margins should be symmetric */
264
+ /* remove if not needed */
265
+ margin-left: .2em;
266
+
267
+ /* You can be more comfortable with increased icons size */
268
+ /* font-size: 120%; */
269
+
270
+ /* Font smoothing. That was taken from TWBS */
271
+ -webkit-font-smoothing: antialiased;
272
+ -moz-osx-font-smoothing: grayscale;
273
+
274
+ /* Uncomment for 3D effect */
275
+ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
276
+ }
277
+ </style>
278
+ <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/makerist-ie7.css"><![endif]-->
279
+ <script>
280
+ function toggleCodes(on) {
281
+ var obj = document.getElementById('icons');
282
+
283
+ if (on) {
284
+ obj.className += ' codesOn';
285
+ } else {
286
+ obj.className = obj.className.replace(' codesOn', '');
287
+ }
288
+ }
289
+
290
+ </script>
291
+ </head>
292
+ <body>
293
+ <div class="container header">
294
+ <h1>
295
+ makerist
296
+ <small>font demo</small>
297
+ </h1>
298
+ <label class="switch">
299
+ <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
300
+ </label>
301
+ </div>
302
+ <div id="icons" class="container">
303
+ <div class="row">
304
+ <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-mail-alt">&#xe800;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xe800</span></div>
305
+ <div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-search">&#xe801;</i> <span class="i-name">icon-search</span><span class="i-code">0xe801</span></div>
306
+ <div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star">&#xe802;</i> <span class="i-name">icon-star</span><span class="i-code">0xe802</span></div>
307
+ <div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe803;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe803</span></div>
308
+ </div>
309
+ <div class="row">
310
+ <div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-star-half">&#xe804;</i> <span class="i-name">icon-star-half</span><span class="i-code">0xe804</span></div>
311
+ <div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-star-half-alt">&#xe805;</i> <span class="i-name">icon-star-half-alt</span><span class="i-code">0xe805</span></div>
312
+ <div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-play">&#xe806;</i> <span class="i-name">icon-play</span><span class="i-code">0xe806</span></div>
313
+ <div title="Code: 0xe807" class="the-icons span3"><i class="demo-icon icon-facebook-squared">&#xe807;</i> <span class="i-name">icon-facebook-squared</span><span class="i-code">0xe807</span></div>
314
+ </div>
315
+ <div class="row">
316
+ <div title="Code: 0xe808" class="the-icons span3"><i class="demo-icon icon-basket">&#xe808;</i> <span class="i-name">icon-basket</span><span class="i-code">0xe808</span></div>
317
+ <div title="Code: 0xe809" class="the-icons span3"><i class="demo-icon icon-pinterest-squared">&#xe809;</i> <span class="i-name">icon-pinterest-squared</span><span class="i-code">0xe809</span></div>
318
+ <div title="Code: 0xe80a" class="the-icons span3"><i class="demo-icon icon-up-open-big">&#xe80a;</i> <span class="i-name">icon-up-open-big</span><span class="i-code">0xe80a</span></div>
319
+ <div title="Code: 0xe80b" class="the-icons span3"><i class="demo-icon icon-play-circled2">&#xe80b;</i> <span class="i-name">icon-play-circled2</span><span class="i-code">0xe80b</span></div>
320
+ </div>
321
+ <div class="row">
322
+ <div title="Code: 0xe80c" class="the-icons span3"><i class="demo-icon icon-check">&#xe80c;</i> <span class="i-name">icon-check</span><span class="i-code">0xe80c</span></div>
323
+ <div title="Code: 0xe80d" class="the-icons span3"><i class="demo-icon icon-left-open">&#xe80d;</i> <span class="i-name">icon-left-open</span><span class="i-code">0xe80d</span></div>
324
+ <div title="Code: 0xe80e" class="the-icons span3"><i class="demo-icon icon-right-open">&#xe80e;</i> <span class="i-name">icon-right-open</span><span class="i-code">0xe80e</span></div>
325
+ <div title="Code: 0xe80f" class="the-icons span3"><i class="demo-icon icon-right-big">&#xe80f;</i> <span class="i-name">icon-right-big</span><span class="i-code">0xe80f</span></div>
326
+ </div>
327
+ <div class="row">
328
+ <div title="Code: 0xe810" class="the-icons span3"><i class="demo-icon icon-twitter-squared">&#xe810;</i> <span class="i-name">icon-twitter-squared</span><span class="i-code">0xe810</span></div>
329
+ <div title="Code: 0xe811" class="the-icons span3"><i class="demo-icon icon-cancel">&#xe811;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe811</span></div>
330
+ <div title="Code: 0xe812" class="the-icons span3"><i class="demo-icon icon-eye">&#xe812;</i> <span class="i-name">icon-eye</span><span class="i-code">0xe812</span></div>
331
+ <div title="Code: 0xe813" class="the-icons span3"><i class="demo-icon icon-eye-off">&#xe813;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe813</span></div>
332
+ </div>
333
+ <div class="row">
334
+ <div title="Code: 0xe814" class="the-icons span3"><i class="demo-icon icon-female">&#xe814;</i> <span class="i-name">icon-female</span><span class="i-code">0xe814</span></div>
335
+ <div title="Code: 0xe815" class="the-icons span3"><i class="demo-icon icon-male">&#xe815;</i> <span class="i-name">icon-male</span><span class="i-code">0xe815</span></div>
336
+ <div title="Code: 0xe816" class="the-icons span3"><i class="demo-icon icon-down-dir">&#xe816;</i> <span class="i-name">icon-down-dir</span><span class="i-code">0xe816</span></div>
337
+ <div title="Code: 0xe817" class="the-icons span3"><i class="demo-icon icon-comment-empty">&#xe817;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xe817</span></div>
338
+ </div>
339
+ <div class="row">
340
+ <div title="Code: 0xe818" class="the-icons span3"><i class="demo-icon icon-attach">&#xe818;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe818</span></div>
341
+ <div title="Code: 0xe819" class="the-icons span3"><i class="demo-icon icon-upload-cloud">&#xe819;</i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe819</span></div>
342
+ <div title="Code: 0xe81a" class="the-icons span3"><i class="demo-icon icon-heart">&#xe81a;</i> <span class="i-name">icon-heart</span><span class="i-code">0xe81a</span></div>
343
+ <div title="Code: 0xe81b" class="the-icons span3"><i class="demo-icon icon-resize-small">&#xe81b;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe81b</span></div>
344
+ </div>
345
+ <div class="row">
346
+ <div title="Code: 0xe81c" class="the-icons span3"><i class="demo-icon icon-menu">&#xe81c;</i> <span class="i-name">icon-menu</span><span class="i-code">0xe81c</span></div>
347
+ <div title="Code: 0xe81d" class="the-icons span3"><i class="demo-icon icon-chat-empty">&#xe81d;</i> <span class="i-name">icon-chat-empty</span><span class="i-code">0xe81d</span></div>
348
+ <div title="Code: 0xe81e" class="the-icons span3"><i class="demo-icon icon-camera">&#xe81e;</i> <span class="i-name">icon-camera</span><span class="i-code">0xe81e</span></div>
349
+ <div title="Code: 0xe81f" class="the-icons span3"><i class="demo-icon icon-cancel-circled">&#xe81f;</i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe81f</span></div>
350
+ </div>
351
+ <div class="row">
352
+ <div title="Code: 0xe820" class="the-icons span3"><i class="demo-icon icon-plus">&#xe820;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe820</span></div>
353
+ <div title="Code: 0xe821" class="the-icons span3"><i class="demo-icon icon-info-circled">&#xe821;</i> <span class="i-name">icon-info-circled</span><span class="i-code">0xe821</span></div>
354
+ <div title="Code: 0xe822" class="the-icons span3"><i class="demo-icon icon-heart-empty">&#xe822;</i> <span class="i-name">icon-heart-empty</span><span class="i-code">0xe822</span></div>
355
+ <div title="Code: 0xe823" class="the-icons span3"><i class="demo-icon icon-download-cloud">&#xe823;</i> <span class="i-name">icon-download-cloud</span><span class="i-code">0xe823</span></div>
356
+ </div>
357
+ <div class="row">
358
+ <div title="Code: 0xe824" class="the-icons span3"><i class="demo-icon icon-trash">&#xe824;</i> <span class="i-name">icon-trash</span><span class="i-code">0xe824</span></div>
359
+ <div title="Code: 0xe825" class="the-icons span3"><i class="demo-icon icon-pencil">&#xe825;</i> <span class="i-name">icon-pencil</span><span class="i-code">0xe825</span></div>
360
+ <div title="Code: 0xe826" class="the-icons span3"><i class="demo-icon icon-ok">&#xe826;</i> <span class="i-name">icon-ok</span><span class="i-code">0xe826</span></div>
361
+ <div title="Code: 0xe827" class="the-icons span3"><i class="demo-icon icon-left-dir">&#xe827;</i> <span class="i-name">icon-left-dir</span><span class="i-code">0xe827</span></div>
362
+ </div>
363
+ <div class="row">
364
+ <div title="Code: 0xe828" class="the-icons span3"><i class="demo-icon icon-icon_play-01">&#xe828;</i> <span class="i-name">icon-icon_play-01</span><span class="i-code">0xe828</span></div>
365
+ <div title="Code: 0xe829" class="the-icons span3"><i class="demo-icon icon-right-dir">&#xe829;</i> <span class="i-name">icon-right-dir</span><span class="i-code">0xe829</span></div>
366
+ <div title="Code: 0xe82a" class="the-icons span3"><i class="demo-icon icon-down-open-big">&#xe82a;</i> <span class="i-name">icon-down-open-big</span><span class="i-code">0xe82a</span></div>
367
+ <div title="Code: 0xe82b" class="the-icons span3"><i class="demo-icon icon-to-start">&#xe82b;</i> <span class="i-name">icon-to-start</span><span class="i-code">0xe82b</span></div>
368
+ </div>
369
+ <div class="row">
370
+ <div title="Code: 0xe82c" class="the-icons span3"><i class="demo-icon icon-to-end">&#xe82c;</i> <span class="i-name">icon-to-end</span><span class="i-code">0xe82c</span></div>
371
+ <div title="Code: 0xe82d" class="the-icons span3"><i class="demo-icon icon-link">&#xe82d;</i> <span class="i-name">icon-link</span><span class="i-code">0xe82d</span></div>
372
+ <div title="Code: 0xe82e" class="the-icons span3"><i class="demo-icon icon-bleach">&#xe82e;</i> <span class="i-name">icon-bleach</span><span class="i-code">0xe82e</span></div>
373
+ <div title="Code: 0xe82f" class="the-icons span3"><i class="demo-icon icon-clorine_bleach">&#xe82f;</i> <span class="i-name">icon-clorine_bleach</span><span class="i-code">0xe82f</span></div>
374
+ </div>
375
+ <div class="row">
376
+ <div title="Code: 0xe830" class="the-icons span3"><i class="demo-icon icon-dry_clean">&#xe830;</i> <span class="i-name">icon-dry_clean</span><span class="i-code">0xe830</span></div>
377
+ <div title="Code: 0xe831" class="the-icons span3"><i class="demo-icon icon-dry_flat">&#xe831;</i> <span class="i-name">icon-dry_flat</span><span class="i-code">0xe831</span></div>
378
+ <div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-extra_gentle_wash_ninety_five_degrees">&#xe832;</i> <span class="i-name">icon-extra_gentle_wash_ninety_five_degrees</span><span class="i-code">0xe832</span></div>
379
+ <div title="Code: 0xe833" class="the-icons span3"><i class="demo-icon icon-extra_gentle_wash_fourty_degrees">&#xe833;</i> <span class="i-name">icon-extra_gentle_wash_fourty_degrees</span><span class="i-code">0xe833</span></div>
380
+ </div>
381
+ <div class="row">
382
+ <div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-extra_gentle_wash_sixty_degrees">&#xe834;</i> <span class="i-name">icon-extra_gentle_wash_sixty_degrees</span><span class="i-code">0xe834</span></div>
383
+ <div title="Code: 0xe835" class="the-icons span3"><i class="demo-icon icon-tumble_dry_medium_heat">&#xe835;</i> <span class="i-name">icon-tumble_dry_medium_heat</span><span class="i-code">0xe835</span></div>
384
+ <div title="Code: 0xe836" class="the-icons span3"><i class="demo-icon icon-wash_fourty_degrees">&#xe836;</i> <span class="i-name">icon-wash_fourty_degrees</span><span class="i-code">0xe836</span></div>
385
+ <div title="Code: 0xe837" class="the-icons span3"><i class="demo-icon icon-wash_ninety_five_degrees">&#xe837;</i> <span class="i-name">icon-wash_ninety_five_degrees</span><span class="i-code">0xe837</span></div>
386
+ </div>
387
+ <div class="row">
388
+ <div title="Code: 0xe838" class="the-icons span3"><i class="demo-icon icon-wash_sixty_degrees">&#xe838;</i> <span class="i-name">icon-wash_sixty_degrees</span><span class="i-code">0xe838</span></div>
389
+ <div title="Code: 0xe839" class="the-icons span3"><i class="demo-icon icon-wash_thrity_degrees">&#xe839;</i> <span class="i-name">icon-wash_thrity_degrees</span><span class="i-code">0xe839</span></div>
390
+ <div title="Code: 0xe83a" class="the-icons span3"><i class="demo-icon icon-wet_cleaning">&#xe83a;</i> <span class="i-name">icon-wet_cleaning</span><span class="i-code">0xe83a</span></div>
391
+ <div title="Code: 0xe83b" class="the-icons span3"><i class="demo-icon icon-iron_high_heat">&#xe83b;</i> <span class="i-name">icon-iron_high_heat</span><span class="i-code">0xe83b</span></div>
392
+ </div>
393
+ <div class="row">
394
+ <div title="Code: 0xe83c" class="the-icons span3"><i class="demo-icon icon-iron_low_heat">&#xe83c;</i> <span class="i-name">icon-iron_low_heat</span><span class="i-code">0xe83c</span></div>
395
+ <div title="Code: 0xe83d" class="the-icons span3"><i class="demo-icon icon-iron_medium_heat">&#xe83d;</i> <span class="i-name">icon-iron_medium_heat</span><span class="i-code">0xe83d</span></div>
396
+ <div title="Code: 0xe83e" class="the-icons span3"><i class="demo-icon icon-non_clorine_bleach">&#xe83e;</i> <span class="i-name">icon-non_clorine_bleach</span><span class="i-code">0xe83e</span></div>
397
+ <div title="Code: 0xe83f" class="the-icons span3"><i class="demo-icon icon-do_not_bleach">&#xe83f;</i> <span class="i-name">icon-do_not_bleach</span><span class="i-code">0xe83f</span></div>
398
+ </div>
399
+ <div class="row">
400
+ <div title="Code: 0xe840" class="the-icons span3"><i class="demo-icon icon-do_not_dry_clean">&#xe840;</i> <span class="i-name">icon-do_not_dry_clean</span><span class="i-code">0xe840</span></div>
401
+ <div title="Code: 0xe841" class="the-icons span3"><i class="demo-icon icon-do_not_iron">&#xe841;</i> <span class="i-name">icon-do_not_iron</span><span class="i-code">0xe841</span></div>
402
+ <div title="Code: 0xe842" class="the-icons span3"><i class="demo-icon icon-do_not_tumble_dry">&#xe842;</i> <span class="i-name">icon-do_not_tumble_dry</span><span class="i-code">0xe842</span></div>
403
+ <div title="Code: 0xe843" class="the-icons span3"><i class="demo-icon icon-do_not_wash">&#xe843;</i> <span class="i-name">icon-do_not_wash</span><span class="i-code">0xe843</span></div>
404
+ </div>
405
+ <div class="row">
406
+ <div title="Code: 0xe844" class="the-icons span3"><i class="demo-icon icon-perchloroethylene_solvent">&#xe844;</i> <span class="i-name">icon-perchloroethylene_solvent</span><span class="i-code">0xe844</span></div>
407
+ <div title="Code: 0xe845" class="the-icons span3"><i class="demo-icon icon-tumble_dry">&#xe845;</i> <span class="i-name">icon-tumble_dry</span><span class="i-code">0xe845</span></div>
408
+ <div title="Code: 0xe846" class="the-icons span3"><i class="demo-icon icon-tumble_dry_high_heat">&#xe846;</i> <span class="i-name">icon-tumble_dry_high_heat</span><span class="i-code">0xe846</span></div>
409
+ <div title="Code: 0xe847" class="the-icons span3"><i class="demo-icon icon-tumble_dry_low_heat">&#xe847;</i> <span class="i-name">icon-tumble_dry_low_heat</span><span class="i-code">0xe847</span></div>
410
+ </div>
411
+ <div class="row">
412
+ <div title="Code: 0xe848" class="the-icons span3"><i class="demo-icon icon-extra_gentle_wash_thrity_degrees">&#xe848;</i> <span class="i-name">icon-extra_gentle_wash_thrity_degrees</span><span class="i-code">0xe848</span></div>
413
+ <div title="Code: 0xe849" class="the-icons span3"><i class="demo-icon icon-general_dry">&#xe849;</i> <span class="i-name">icon-general_dry</span><span class="i-code">0xe849</span></div>
414
+ <div title="Code: 0xe84a" class="the-icons span3"><i class="demo-icon icon-gentle_hydrocarbon_solvent">&#xe84a;</i> <span class="i-name">icon-gentle_hydrocarbon_solvent</span><span class="i-code">0xe84a</span></div>
415
+ <div title="Code: 0xe84b" class="the-icons span3"><i class="demo-icon icon-gentle_perchloroethylene_solvent">&#xe84b;</i> <span class="i-name">icon-gentle_perchloroethylene_solvent</span><span class="i-code">0xe84b</span></div>
416
+ </div>
417
+ <div class="row">
418
+ <div title="Code: 0xe84c" class="the-icons span3"><i class="demo-icon icon-gentle_wash_fourty_degrees">&#xe84c;</i> <span class="i-name">icon-gentle_wash_fourty_degrees</span><span class="i-code">0xe84c</span></div>
419
+ <div title="Code: 0xe84d" class="the-icons span3"><i class="demo-icon icon-gentle_wash_ninety_five_degrees">&#xe84d;</i> <span class="i-name">icon-gentle_wash_ninety_five_degrees</span><span class="i-code">0xe84d</span></div>
420
+ <div title="Code: 0xe84e" class="the-icons span3"><i class="demo-icon icon-gentle_wash_sixty_degrees">&#xe84e;</i> <span class="i-name">icon-gentle_wash_sixty_degrees</span><span class="i-code">0xe84e</span></div>
421
+ <div title="Code: 0xe84f" class="the-icons span3"><i class="demo-icon icon-gentle_wash_thrity_degrees">&#xe84f;</i> <span class="i-name">icon-gentle_wash_thrity_degrees</span><span class="i-code">0xe84f</span></div>
422
+ </div>
423
+ <div class="row">
424
+ <div title="Code: 0xe850" class="the-icons span3"><i class="demo-icon icon-gentle_wet_cleaning">&#xe850;</i> <span class="i-name">icon-gentle_wet_cleaning</span><span class="i-code">0xe850</span></div>
425
+ <div title="Code: 0xe851" class="the-icons span3"><i class="demo-icon icon-hand_wash">&#xe851;</i> <span class="i-name">icon-hand_wash</span><span class="i-code">0xe851</span></div>
426
+ <div title="Code: 0xe852" class="the-icons span3"><i class="demo-icon icon-hydrocarbon_solvent">&#xe852;</i> <span class="i-name">icon-hydrocarbon_solvent</span><span class="i-code">0xe852</span></div>
427
+ <div title="Code: 0xe853" class="the-icons span3"><i class="demo-icon icon-iron">&#xe853;</i> <span class="i-name">icon-iron</span><span class="i-code">0xe853</span></div>
428
+ </div>
429
+ </div>
430
+ <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
431
+ </body>
432
+ </html>
data/spec/spec_helper.rb CHANGED
@@ -4,7 +4,6 @@ require 'bundler/setup'
4
4
  require 'fontello_rails_converter'
5
5
 
6
6
  RSpec.configure do |config|
7
- config.treat_symbols_as_metadata_keys_with_true_values = true
8
7
  config.run_all_when_everything_filtered = true
9
8
  config.filter_run :focus
10
9
 
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: fontello_rails_converter
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.3
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jakob Hilden
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2015-05-10 00:00:00.000000000 Z
11
+ date: 2015-06-09 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rubyzip
@@ -52,6 +52,20 @@ dependencies:
52
52
  - - ">="
53
53
  - !ruby/object:Gem::Version
54
54
  version: '0'
55
+ - !ruby/object:Gem::Dependency
56
+ name: activesupport
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - ">="
60
+ - !ruby/object:Gem::Version
61
+ version: '0'
62
+ type: :runtime
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - ">="
67
+ - !ruby/object:Gem::Version
68
+ version: '0'
55
69
  description: Gem for opening up your current fontello font in the browser from the
56
70
  command line and copying & converting the files for your Rails app (inclusively
57
71
  Sass enhancements).
@@ -78,6 +92,7 @@ files:
78
92
  - lib/fontello_rails_converter/fontello_api.rb
79
93
  - lib/fontello_rails_converter/railtie.rb
80
94
  - lib/fontello_rails_converter/version.rb
95
+ - spec/cli_spec.rb
81
96
  - spec/dummy/README.rdoc
82
97
  - spec/dummy/Rakefile
83
98
  - spec/dummy/app/assets/images/.keep
@@ -121,6 +136,8 @@ files:
121
136
  - spec/dummy/public/500.html
122
137
  - spec/dummy/public/favicon.ico
123
138
  - spec/fixtures/config.json
139
+ - spec/fixtures/converted/fontello-demo.html
140
+ - spec/fixtures/fontello-demo.html
124
141
  - spec/fixtures/fontello_session_id_changing
125
142
  - spec/fixtures/fontello_session_id_empty
126
143
  - spec/fixtures/fontello_session_id_persisted
@@ -147,12 +164,13 @@ required_rubygems_version: !ruby/object:Gem::Requirement
147
164
  version: '0'
148
165
  requirements: []
149
166
  rubyforge_project:
150
- rubygems_version: 2.2.2
167
+ rubygems_version: 2.4.7
151
168
  signing_key:
152
169
  specification_version: 4
153
170
  summary: CLI gem for comfortably working with custom icon fonts from fontello.com
154
171
  in your Rails apps
155
172
  test_files:
173
+ - spec/cli_spec.rb
156
174
  - spec/dummy/README.rdoc
157
175
  - spec/dummy/Rakefile
158
176
  - spec/dummy/app/assets/images/.keep
@@ -196,6 +214,8 @@ test_files:
196
214
  - spec/dummy/public/500.html
197
215
  - spec/dummy/public/favicon.ico
198
216
  - spec/fixtures/config.json
217
+ - spec/fixtures/converted/fontello-demo.html
218
+ - spec/fixtures/fontello-demo.html
199
219
  - spec/fixtures/fontello_session_id_changing
200
220
  - spec/fixtures/fontello_session_id_empty
201
221
  - spec/fixtures/fontello_session_id_persisted