Permalink
Browse files

feature(icons): use FontAwesome icons

BREAKING CHANGE:
If you use a reference to the physical Elgg sprites please update your
plugin to use the FontAwesome icons.

Replace the Elgg sprites icons by FontAwesome icons, this allowes for
more icons and easier styling of the icons

fixes #7239
  • Loading branch information...
jeabakker committed Jun 29, 2015
1 parent 13afe2e commit ea7b17d5575c28ed3013e20bbe4d776e31d174a2
@@ -1,9 +0,0 @@
-The Sprites are copyright © GentleFace http://www.gentleface.com/
-
-They are licensed under Creative Commons
-Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) with special
-permission to distribute and use with the Elgg open source framework. For uses
-outside of Elgg, please see the license and/or contact the author at
-design@gentleface.com
-
-http://creativecommons.org/licenses/by-nc-nd/3.0/
View
Binary file not shown.
View
Binary file not shown.
View
@@ -30,7 +30,8 @@
"bower-asset/jquery-colorbox": "^1.5.14",
"bower-asset/jquery-imgareaselect": "^0.9.0",
"bower-asset/jquery-ui-extensions": "dev-master",
- "bower-asset/jquery-jeditable": "^1.7.3"
+ "bower-asset/jquery-jeditable": "^1.7.3",
+ "FortAwesome/Font-Awesome": "^4.3"
},
"repositories": [
{
View
@@ -36,7 +36,7 @@ Here is a list of the existing CSS views:
* elements/chrome.css: This file has some miscellaneous look-and-feel classes.
* elements/components.css: This file contains many “css objects” that are used all over the site: media block, list, gallery, table, owner block, system messages, river, tags, photo, and comments.
* elements/forms.css: This file determines what your forms and input elements will look like.
- * elements/icons.css: Contains styles for the sprite icons and avatars used on your site.
+ * elements/icons.css: Contains styles for the icons and avatars used on your site.
* elements/layout.css: Determines what your page layout will look like: sidebars, page wrapper, main body, header, footer, etc.
* elements/modules.css: Lots of content in Elgg is displayed in boxes with a title and a content body. We called these modules. There are a few kinds: info, aside, featured, dropdown, popup, widget. Widget styles are included in this file too, since they are a subset of modules.
* elements/navigation.css: This file determines what all your menus will look like.
@@ -89,6 +89,19 @@ This gives you total control over the way Elgg looks and behaves. It
gives you the option to either slightly modify or totally replace
existing views.
+Icons
+-----
+
+As of Elgg 2.0 the default Elgg icons come from the FontAwesome_ library.
+You can use any of these icons by calling:
+
+``elgg_view_icon('icon-name');``
+
+``icon-name`` can be any of the `FontAwesome icons`_ without the ``fa-``-prefix.
+
+.. _FontAwesome: http://fontawesome.io/
+.. _FontAwesome icons: http://fontawesome.io/icons/
+
Tools
=====
View
@@ -1313,7 +1313,7 @@ function elgg_view_list_item($item, array $vars = array()) {
}
/**
- * View one of the elgg sprite icons
+ * View one of the icons
*
* Shorthand for <span class="elgg-icon elgg-icon-$name"></span>
*
@@ -1519,6 +1519,9 @@ function elgg_views_boot() {
elgg_register_js('elgg', elgg_get_simplecache_url('elgg.js'), 'head');
elgg_load_js('elgg');
+
+ elgg_register_css('font-awesome', elgg_get_simplecache_url('font-awesome/css/font-awesome.css'));
+ elgg_load_css('font-awesome');
elgg_register_css('elgg', elgg_get_simplecache_url('elgg.css'));
elgg_load_css('elgg');
View
@@ -6,7 +6,7 @@
/**
* Relative paths (no leading slash) are resolved relative to Elgg's install root.
- *
+ *
* All assets managed by composer (not checked in to version control) should use this syntax.
*/
"jquery.js" => "vendor/bower-asset/jquery/dist/jquery.min.js",
@@ -20,6 +20,10 @@
"require.js" => "vendor/bower-asset/requirejs/require.js",
"sprintf.js" => "vendor/bower-asset/sprintf/dist/sprintf.min.js",
"text.js" => "vendor/bower-asset/text/text.js",
+
+ // need to use some folder structure, because FontAwesome includes fonts relative to css
+ "font-awesome/css/font-awesome.css" => "vendor/fortawesome/font-awesome/css/font-awesome.min.css",
+ "font-awesome/fonts/" => "vendor/fortawesome/font-awesome/fonts",
/**
* __DIR__ should be utilized when referring to assets that are checked in to version control.
@@ -75,7 +75,7 @@
'theme_sandbox:navigation' => 'Navigation',
'theme_sandbox:typography' => 'Typography',
- 'theme_sandbox:icons:blurb' => 'Use <em>elgg_view_icon($name)</em> or the class elgg-icon-$name to display icons.',
+ 'theme_sandbox:icons:blurb' => 'Use <em>elgg_view_icon($name)</em> to display icons.',
// unit tests
'developers:unit_tests:description' => 'Elgg has unit and integration tests for detecting bugs in its core classes and functions.',
@@ -3,7 +3,7 @@
* Icons CSS
*/
-echo elgg_view_module('theme-sandbox-demo', 'Icon Sprites (.elgg-icon)', elgg_view('theme_sandbox/icons/sprites'));
+echo elgg_view_module('theme-sandbox-demo', 'Icons (.elgg-icon)', elgg_view('theme_sandbox/icons/sprites'));
echo elgg_view_module('theme-sandbox-demo', 'Ajax Loader (.elgg-ajax-loader)', elgg_view('theme_sandbox/icons/loader'));
@@ -1,7 +1,7 @@
<?php
/**
* Elgg Search css
- *
+ *
*/
?>
@@ -21,13 +21,12 @@
display: none;
}
.elgg-search input[type=text] {
- border-radius: 10px;
+ border-radius: 10px;
border: 1px solid #71b9f7;
color: white;
font-size: 12px;
font-weight: bold;
padding: 2px 4px 2px 26px;
- background: transparent url(<?= elgg_get_simplecache_url("elgg_sprites.png"); ?>) no-repeat 2px -934px;
}
.elgg-search input[type=text]:focus, .elgg-search input[type=text]:active {
background-color: white;
View
@@ -195,7 +195,7 @@
margin: 8px 8px 0 0;
}
.elgg-menu-user,
-.elgg-menu-admin-header,
+.elgg-menu-admin-header,
.elgg-menu-user a,
.elgg-menu-admin-header a {
color: #999999;
@@ -350,7 +350,7 @@
}
.elgg-module-popup {
background-color: white;
- border: 1px solid #ccc;
+ border: 1px solid #ccc;
z-index: 9999;
margin-bottom: 0;
padding: 5px;
@@ -507,7 +507,7 @@
select {
max-width: 100%;
- padding: 4px;
+ padding: 4px;
}
.elgg-fieldset {
@@ -1301,41 +1301,39 @@
ICONS
*************************************** */
.elgg-icon {
- background: transparent url(<?= elgg_get_simplecache_url("admin_sprites.png"); ?>) no-repeat left;
+ color: #aaa;
+ font-size: 16px;
width: 16px;
height: 16px;
- display: inline-block;
margin: 0 2px;
- vertical-align: text-bottom;
-}
-.elgg-module .elgg-head .elgg-icon {
- vertical-align: baseline;
-}
-.elgg-icon-delete:hover,
-.elgg-icon-delete-alt:hover {
- background-position: 0 -0px;
-}
-.elgg-icon-delete,
-.elgg-icon-delete-alt {
- background-position: 0 -18px;
}
-.elgg-icon-drag-arrow:hover {
- background-position: 0 -36px;
-}
-.elgg-icon-drag-arrow {
- background-position: 0 -54px;
-}
-.elgg-icon-hover-menu:hover {
- background-position: 0 -72px;
+
+:focus > .elgg-icon,
+.elgg-icon:hover,
+.elgg-icon-hover {
+ color: #333;
}
-.elgg-icon-hover-menu {
- background-position: 0 -90px;
+
+h1 > .elgg-icon,
+h2 > .elgg-icon,
+h3 > .elgg-icon,
+h4 > .elgg-icon,
+h5 > .elgg-icon,
+h6 > .elgg-icon {
+ font-size: 1em;
}
-.elgg-icon-settings-alt:hover {
- background-position: 0 -108px;
+
+.elgg-avatar > .elgg-icon-hover-menu {
+ display: none;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin: 0;
+ cursor: pointer;
}
-.elgg-icon-settings-alt {
- background-position: 0 -126px;
+.elgg-avatar > .elgg-icon-hover-menu:before {
+ position: absolute;
+ right: 2px;
}
.elgg-ajax-loader {
@@ -1381,47 +1379,6 @@
width: 200px;
height: 200px;
}
-.elgg-avatar > .elgg-icon-hover-menu {
- display: none;
- position: absolute;
- right: 0;
- bottom: 0;
- margin: 0;
- cursor: pointer;
-}
-.elgg-avatar {
- position: relative;
-}
-.elgg-avatar > a > img {
- display: block;
-}
-.elgg-avatar-tiny > a > img {
- width: 25px;
- height: 25px;
-
- /* remove the border-radius if you don't want rounded avatars in supported browsers */
- border-radius: 3px;
- background-clip: border;
- background-size: 25px;
-}
-.elgg-avatar-small > a > img {
- width: 40px;
- height: 40px;
-
- /* remove the border-radius if you don't want rounded avatars in supported browsers */
- border-radius: 5px;
-
- background-clip: border;
- background-size: 40px;
-}
-.elgg-avatar-medium > a > img {
- width: 100px;
- height: 100px;
-}
-.elgg-avatar-large > a > img {
- width: 200px;
- height: 200px;
-}
/* ***************************************
PLUGINS
@@ -1732,15 +1689,15 @@
.elgg-admin-button-nav {
display: none;
float: right;
- margin: 6px 0 0 10px;
+ margin: 6px 0 0 10px;
cursor: pointer;
}
.elgg-admin-button-nav:hover .icon-bar {
background-color: #999;
}
.elgg-admin-button-nav .icon-bar {
background-color: #F5F5F5;
- border-radius: 1px 1px 1px 1px;
+ border-radius: 1px 1px 1px 1px;
display: block;
height: 3px;
width: 26px;
@@ -1765,7 +1722,7 @@
}
}
@media (max-width: 768px) {
- .elgg-admin-button-nav {
+ .elgg-admin-button-nav {
display: block;
}
.elgg-heading-site {
Oops, something went wrong.

0 comments on commit ea7b17d

Please sign in to comment.