Skip to content

Instantly share code, notes, and snippets.

@oakbow
Last active December 28, 2015 00:18
Show Gist options
  • Save oakbow/7412067 to your computer and use it in GitHub Desktop.
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.
# 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