diff --git a/README.md b/README.md index 4d051a47..735ae7b3 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ **Icon fonts from the command line.** Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.) -from a collection of SVGs +from a collection of SVGs ([example](https://rawgit.com/FontCustom/fontcustom/master/spec/fixtures/example/example-preview.html)). [Changelog](https://github.com/FontCustom/fontcustom/blob/master/CHANGELOG.md)
@@ -150,7 +150,7 @@ Now the font is adjustable to css 'font-size' and 'color'. You can save generated fonts, CSS, and other files to different locations by using `fontcustom.yml`. Font Custom can also read input vectors and templates -from different places. +from different places. Just edit the `input` and `output` YAML hashes and their corresponding keys. @@ -181,6 +181,7 @@ helpers: * `@manifest`: a hash of options, generated file paths, code points, and just about everything else Font Custom knows. * `@font_path`: the path from CSS to font files (without an extension) * `@font_path_alt`: if `preprocessor_path` was set, this is the modified path +* `pseudo_element`: if `css3` was set to true, then it will print `::before`. Otherwise the PseudoElement will be `:before` `font_face` accepts a hash that modifies the CSS url() function and the path of the font files (`font_face(url: "font-url", path: @font_path_alt)`). diff --git a/lib/fontcustom.rb b/lib/fontcustom.rb index bfc79b41..57d3822e 100644 --- a/lib/fontcustom.rb +++ b/lib/fontcustom.rb @@ -36,6 +36,7 @@ def gem_lib :preprocessor_path => nil, :autowidth => false, :no_hash => false, + :css3 => false, :debug => false, :force => false, :quiet => false, diff --git a/lib/fontcustom/cli.rb b/lib/fontcustom/cli.rb index dbfa0fba..77537274 100644 --- a/lib/fontcustom/cli.rb +++ b/lib/fontcustom/cli.rb @@ -25,7 +25,7 @@ class CLI < Thor class_option :font_name, :aliases => %w|--name -n|, :type => :string, :desc => "The font's name. Also determines the file names of generated templates.", :default => DEFAULT_OPTIONS[:font_name] - + class_option :font_design_size, :aliases => %s|--size -s|, :type => :numeric, :desc => "Size (in pica points) for which this font is designed.", :default => DEFAULT_OPTIONS[:font_design_size] @@ -52,6 +52,9 @@ class CLI < Thor class_option :autowidth, :aliases => "-A", :type => :boolean, :desc => "Horizontally fit glyphs to their individual vector widths." + class_option :css3, :type => :boolean, + :desc => "Use CSS3 Pseudo Elements" + class_option :no_hash, :aliases => "-h", :type => :boolean, :desc => "Generate fonts without asset-busting hashes." diff --git a/lib/fontcustom/generator/template.rb b/lib/fontcustom/generator/template.rb index d7f107c5..2f245d3d 100644 --- a/lib/fontcustom/generator/template.rb +++ b/lib/fontcustom/generator/template.rb @@ -12,6 +12,12 @@ class Template def initialize(manifest) @manifest = Fontcustom::Manifest.new manifest @options = @manifest.get :options + + @pseudo_element = ':before'; + if @options[:css3] + @pseudo_element = '::before'; + end + end def generate @@ -183,7 +189,7 @@ def woff_base64 def glyph_selectors output = @glyphs.map do |name, value| - @options[:css_selector].sub("{{glyph}}", name.to_s) + ":before" + @options[:css_selector].sub("{{glyph}}", name.to_s) + @pseudo_element end output.join ",\n" end @@ -205,10 +211,14 @@ def glyph_properties def glyphs output = @glyphs.map do |name, value| - %Q|#{@options[:css_selector].sub('{{glyph}}', name.to_s)}:before { content: "\\#{value[:codepoint].to_s(16)}"; }| + %Q|#{@options[:css_selector].sub('{{glyph}}', name.to_s)}#{@pseudo_element} { content: "\\#{value[:codepoint].to_s(16)}"; }| end output.join "\n" end + + def pseudo_element + @pseudo_element + end end end end diff --git a/lib/fontcustom/templates/_fontcustom-rails.scss b/lib/fontcustom/templates/_fontcustom-rails.scss index cc162107..608b5e36 100644 --- a/lib/fontcustom/templates/_fontcustom-rails.scss +++ b/lib/fontcustom/templates/_fontcustom-rails.scss @@ -4,9 +4,9 @@ <%= font_face(url: "font-url", path: @font_path_alt) %> -[data-icon]:before { content: attr(data-icon); } +[data-icon]<%= pseudo_element %> { content: attr(data-icon); } -[data-icon]:before, +[data-icon]<%= pseudo_element %>, <%= glyph_selectors %> { <%= glyph_properties %> } diff --git a/lib/fontcustom/templates/_fontcustom.scss b/lib/fontcustom/templates/_fontcustom.scss index c8c775b8..87b31d5f 100644 --- a/lib/fontcustom/templates/_fontcustom.scss +++ b/lib/fontcustom/templates/_fontcustom.scss @@ -4,9 +4,9 @@ <%= font_face(path: @font_path_alt) %> -[data-icon]:before { content: attr(data-icon); } +[data-icon]<%= pseudo_element %> { content: attr(data-icon); } -[data-icon]:before, +[data-icon]<%= pseudo_element %>, <%= glyph_selectors %> { <%= glyph_properties %> } diff --git a/lib/fontcustom/templates/fontcustom.css b/lib/fontcustom/templates/fontcustom.css index f5dfd6e2..932d6414 100644 --- a/lib/fontcustom/templates/fontcustom.css +++ b/lib/fontcustom/templates/fontcustom.css @@ -4,9 +4,9 @@ <%= font_face %> -[data-icon]:before { content: attr(data-icon); } +[data-icon]<%= pseudo_element %> { content: attr(data-icon); } -[data-icon]:before, +[data-icon]<%= pseudo_element %>, <%= glyph_selectors %> { <%= glyph_properties %> }