Last active
December 28, 2015 00:18
-
-
Save oakbow/7412067 to your computer and use it in GitHub Desktop.
for using icons easily, i add helper methods in application_helper.rb.
I made this for icomoon, but i think you may be able to use this with Font-Awesome, Twitter Bootstrap2.0 (not WebFont but png icons) and Bootstrap3.0.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# to make <i> easily. | |
# name: icon class name. | |
# data: webfont number.some webfonts like icomoon can use with this. | |
# color: for Bootstrap2.0. you can set this 'white' for white icon. | |
# class: you can set css class to <i> tag. | |
# style: you can set inline css to <i> tag. | |
def icon_tag(options) | |
raise unless options.present? | |
case options | |
when String | |
name = options | |
data = '' | |
icon_color = '' | |
icon_class = '' | |
style = '' | |
when Hash | |
name = options[:name].presence || '' | |
data = options[:data].presence || '' | |
icon_class = options[:class].presence || '' | |
icon_color = options[:color].present? ? ' icon-' + options[:color] + ' ' : ' ' | |
style = options[:style].presence || '' | |
end | |
raise if name.blank? && data.blank? | |
if name.present? | |
if style.present? | |
content_tag(:i, '', :class => "icon-#{name}#{icon_color}#{icon_class}", :style => "#{style}").html_safe | |
else | |
content_tag(:i, '', :class => "icon-#{name}#{icon_color}#{icon_class}").html_safe | |
end | |
else | |
if style.present? | |
%Q|<i data-icon="#{data}" aria-hidden="true" class="#{icon_class}" style="#{style}"></i>|.html_safe | |
else | |
%Q|<i data-icon="#{data}" aria-hidden="true" class="#{icon_class}"></i>|.html_safe | |
end | |
end | |
end | |
# to use icons, extend link_to from url_helper.rb | |
# you can use this like below. | |
# <%= icon_link_to 'edit', '#', :class => 'btn launch_modal', :target_id => '#info_modal', :icon => 'pencil-2' %> | |
# <%= icon_link_to 'download files', path.to.url, :target => '_blank', :class => 'btn', :icon => {:name => 'download-3', :align => 'left'} %> | |
# <%= icon_link_to 'pupup', '#', :icon => {:name => 'checkmark-circle', :class=>'text-success'}, :class => 'btn primary launch_modal', :target_id => "#edit_modal" %> | |
# arguments are same as link_to except ':icon'. | |
# with this, you can easily buttom formed link with icons, like github. | |
def icon_link_to(*args, &block) | |
if block_given? | |
options = args.first || {} | |
html_options = args.second | |
icon_link_to(capture(&block), options, html_options) | |
else | |
name = args[0] | |
options = args[1] || {} | |
html_options = args[2] || {} | |
icon = html_options.delete(:icon) | |
raise unless icon.present? | |
case icon | |
when String | |
icon_align = 'left' | |
when Hash | |
icon_align = icon[:align].presence || 'left' | |
else | |
raise icon.inspect | |
end | |
if icon_align == 'left' | |
link_to(options, html_options) do | |
(icon_tag(icon) + " #{name}").html_safe | |
end | |
else | |
link_to(options, html_options) do | |
("#{name} " + icon_tag(icon)).html_safe | |
end | |
end | |
end | |
end | |
# to use icons, extend link_to from form_tag_helper.rb | |
# if you use submit_tag, perhaps you can replace only method name to this and add 'icon' property. | |
# you can use this like below. | |
# <%= icon_button_tag 'make finished', :class => 'btn primary mrgn_r', :icon => 'stop', :confirm => 'are you sure finishing this job ?' %> | |
# see icon_link_to also. | |
def icon_button_tag(content_or_options = nil, options = nil, &block) | |
options = content_or_options if block_given? && content_or_options.is_a?(Hash) | |
options ||= {} | |
if block_given? | |
content = capture(&block) | |
else | |
content = content_or_options | |
end | |
icon = options.delete(:icon) | |
raise unless icon.present? | |
case icon | |
when String | |
icon_align = 'left' | |
when Hash | |
icon_align = icon[:align].presence || 'left' | |
else | |
raise icon.inspect | |
end | |
if icon_align == 'left' | |
button_tag(content_or_options, options) do | |
(icon_tag(icon) + " #{content}").html_safe | |
end | |
else | |
button_tag(content_or_options, options) do | |
("#{content} " + icon_tag(icon)).html_safe | |
end | |
end | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment