Added "fa-" prefix to icon class names to avoid common naming collisions

This commit is contained in:
Gary Hepting 2013-06-26 16:24:19 -07:00
parent a9065a166e
commit e8a724f1e9
6 changed files with 2091 additions and 30 deletions

2062
codekit-config.json Normal file

File diff suppressed because it is too large Load Diff

View File

@ -19,8 +19,8 @@ module Jekyll
@icon_object['aliases'] ||= []
@name = icon_object['name']
@id = icon_object['id']
@class = icon_object['class']
@id = "fa-#{icon_object['id']}"
@class = "fa-#{icon_object['class']}"
@aliases = icon_object['aliases']
@unicode = icon_object['unicode']
@created = icon_object['created']
@ -44,11 +44,10 @@ module Jekyll
def initialize(icon_array)
@original_icon_array = icon_array
@icon_array = []
icon_array.each { |icon_object|
@icon_array << Icon.new(icon_object)
}
@icon_array = icon_array.map do |icon_object|
Icon.new(icon_object)
end
end
def [](k)

View File

@ -43,15 +43,15 @@ a {
}
.icons-ul {
margin-left: @icons-li-width;
margin-left: @fa-icons-li-width;
list-style-type: none;
> li { position: relative; }
.icon-li {
position: absolute;
left: -@icons-li-width;
width: @icons-li-width;
left: -@fa-icons-li-width;
width: @fa-icons-li-width;
text-align: center;
line-height: inherit;
}
@ -65,15 +65,15 @@ a {
}
}
.icon-muted { color: @iconMuted; }
.icon-light { color: @iconLight; }
.icon-dark { color: @iconDark; }
.icon-muted { color: @fa-muted-icon; }
.icon-light { color: @fa-light-icon; }
.icon-dark { color: @fa-dark-icon; }
// Icon Borders
// -------------------------
.icon-border {
border: solid 1px @borderColor;
border: solid 1px @fa-border-color;
padding: .2em .25em .15em;
.border-radius(3px);
}

View File

@ -6,11 +6,11 @@
@FontAwesomePath: "../font";
//@FontAwesomePath: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly
@FontAwesomeVersion: "{{ site.fontawesome.version }}";
@borderColor: #eee;
@iconMuted: #eee;
@iconLight: #fff;
@iconDark: #333;
@icons-li-width: 30/14em;
@fa-border-color: #eee;
@fa-muted-icon: #eee;
@fa-light-icon: #fff;
@fa-dark-icon: #333;
@fa-icons-li-width: 30/14em;
{% for icon in icons %}
@{{ icon.id }}: "\{{ icon.unicode }}";

View File

@ -43,15 +43,15 @@ a {
}
.icons-ul {
margin-left: $icons-li-width;
margin-left: $fa-icons-li-width;
list-style-type: none;
> li { position: relative; }
.icon-li {
position: absolute;
left: -$icons-li-width;
width: $icons-li-width;
left: -$fa-icons-li-width;
width: $fa-icons-li-width;
text-align: center;
line-height: inherit;
}
@ -65,15 +65,15 @@ a {
}
}
.icon-muted { color: $iconMuted; }
.icon-light { color: $iconLight; }
.icon-dark { color: $iconDark; }
.icon-muted { color: $fa-muted-icon; }
.icon-light { color: $fa-light-icon; }
.icon-dark { color: $fa-dark-icon; }
// Icon Borders
// -------------------------
.icon-border {
border: solid 1px $borderColor;
border: solid 1px $fa-border-color;
padding: .2em .25em .15em;
@include border-radius(3px);
}

View File

@ -5,11 +5,11 @@
$FontAwesomePath: "../font" !default;
$FontAwesomeVersion: "{{ site.fontawesome.version }}" !default;
$borderColor: #eeeeee !default;
$iconMuted: #eeeeee !default;
$iconLight: white !default;
$iconDark: #333333 !default;
$icons-li-width: (30em/14);
$fa-border-color: #eeeeee !default;
$fa-muted-icon: #eeeeee !default;
$fa-light-icon: white !default;
$fa-dark-icon: #333333 !default;
$fa-icons-li-width: (30em/14);
{% for icon in icons %}
${{ icon.id }}: "\{{ icon.unicode }}";