Nouvelle fonction icon() pour générer le code HTML des icônes

Centralisation de la génération du code des icônes pour pouvoir plus
facilement le changer, en particulier en préparation d'améliorations
futures :
* ajouter des alternatives lorsque l'image n'est pas affichée ;
* améliorer l'accessibilité ;
* permettre de changer les icônes selon le thème graphique choisi ;
* simplifier les CSS.

Contribue à https://github.com/marienfressinaud/FreshRSS/issues/284

18 files changed, 110 insertions, 151 deletions

diff --git a/app/layout/aside_feed.phtml b/app/layout/aside_feed.phtml
index a622ce8a3..56aeee8b9 100644
--- a/app/layout/aside_feed.phtml
+++ b/app/layout/aside_feed.phtml
@@ -7,7 +7,7 @@
 			<div class="dropdown">
 				<div id="dropdown-cat" class="dropdown-target"></div>
 
-				<a class="dropdown-toggle btn" href="#dropdown-cat"><i class="icon i_down">▽</i></a>
+				<a class="dropdown-toggle btn" href="#dropdown-cat"><?php echo icon('down'); ?></a>
 				<ul class="dropdown-menu">
 					<li class="dropdown-close"><a href="#close">❌</a></li>
 
@@ -34,7 +34,7 @@
 					</li>
 				</ul>
 			</div>
-			<button class="btn" type="submit"><i class="icon i_add">✚</i></button>
+			<button class="btn" type="submit"><?php echo icon('add'); ?></button>
 		</div>
 	</form></li>
 
diff --git a/app/layout/aside_flux.phtml b/app/layout/aside_flux.phtml
index 3e057789f..42dc896aa 100644
--- a/app/layout/aside_flux.phtml
+++ b/app/layout/aside_flux.phtml
@@ -1,12 +1,12 @@
 <div class="aside aside_flux" id="aside_flux">
-	<a class="toggle_aside" href="#close"><i class="icon i_close">❌</i></a>
+	<a class="toggle_aside" href="#close"><?php echo icon('close'); ?></a>
 
 	<ul class="categories">
 		<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
 		<li>
 			<div class="stick">
 				<a class="btn btn-important" href="<?php echo _url ('configure', 'feed'); ?>"><?php echo Translate::t ('subscription_management'); ?></a>
-				<a class="btn btn-important" href="<?php echo _url ('configure', 'categorize'); ?>" title="<?php echo Translate::t ('categories_management'); ?>"><i class="icon i_category">☷</i></a>
+				<a class="btn btn-important" href="<?php echo _url ('configure', 'categorize'); ?>" title="<?php echo Translate::t ('categories_management'); ?>"><?php echo icon('category-white'); ?></a>
 			</div>
 		</li>
 		<?php } elseif (login_is_conf ($this->conf)) { ?>
@@ -16,7 +16,7 @@
 		<li>
 			<div class="category all">
 				<a data-unread="<?php echo $this->nb_not_read; ?>" class="btn<?php echo $this->get_c == 'all' ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index'); ?>">
-					<i class="icon i_all">☰</i>
+					<?php echo icon('all'); ?>
 					<?php echo Translate::t ('all_feeds'); ?>
 				</a>
 			</div>
@@ -25,7 +25,7 @@
 		<li>
 			<div class="category favorites">
 				<a data-unread="<?php echo $this->nb_favorites['unread']; ?>" class="btn<?php echo $this->get_c == 'favoris' ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index', 'get', 'favoris'); ?>">
-					<i class="icon i_bookmark">★</i>
+					<?php echo icon('bookmark'); ?>
 					<?php echo Translate::t ('favorite_feeds', $this->nb_favorites['all']); ?>
 				</a>
 			</div>
@@ -38,7 +38,7 @@
 			<?php $c_active = false; if ($this->get_c == $cat->id ()) { $c_active = true; } ?>
 			<div class="category stick<?php echo $c_active ? ' active' : ''; ?>">
 				<a data-unread="<?php echo $cat->nbNotRead (); ?>" class="btn<?php echo $c_active ? ' active' : ''; ?>" href="<?php echo _url ('index', 'index', 'get', 'c_' . $cat->id ()); ?>"><?php echo $cat->name (); ?></a>
-				<a class="btn dropdown-toggle" href="#"><i class="icon <?php echo $c_active ? 'i_up' : 'i_down'; ?>"><?php echo $c_active ? '△' : '▽'; ?></i></a>
+				<a class="btn dropdown-toggle" href="#"><?php echo icon($c_active ? 'up' : 'down'); ?></a>
 			</div>
 
 			<ul class="feeds<?php echo $c_active ? ' active' : ''; ?>">
@@ -49,7 +49,7 @@
 				<li id="f_<?php echo $feed_id; ?>" class="item<?php echo $f_active ? ' active' : ''; ?><?php echo $feed->inError () ? ' error' : ''; ?><?php echo $nbEntries == 0 ? ' empty' : ''; ?>">
 					<div class="dropdown">
 						<div class="dropdown-target"></div>
-						<a class="dropdown-toggle" data-fweb="<?php echo $feed->website (); ?>"><i class="icon i_configure">⚙</i></a>
+						<a class="dropdown-toggle" data-fweb="<?php echo $feed->website (); ?>"><?php echo icon('configure'); ?></a>
 <?php /* feed_config_template */ ?>
 					</div>
 					<img class="favicon" src="<?php echo $feed->favicon (); ?>" alt="✇" />
diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index ce01ed871..a3c8c55c4 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -1,9 +1,9 @@
 <?php if (login_is_conf ($this->conf)) { ?>
 <ul class="nav nav-head nav-login">
 	<?php if (!is_logged ()) { ?>
-	<li class="item"><i class="icon i_login">🔒</i> <a class="signin" href="#"><?php echo Translate::t ('login'); ?></a></li>
+	<li class="item"><?php echo icon('login'); ?> <a class="signin" href="#"><?php echo Translate::t ('login'); ?></a></li>
 	<?php } else { ?>
-	<li class="item"><i class="icon i_logout">🔓</i> <a class="signout" href="#"><?php echo Translate::t ('logout'); ?></a></li>
+	<li class="item"><?php echo icon('logout'); ?> <a class="signout" href="#"><?php echo Translate::t ('logout'); ?></a></li>
 	<?php } ?>
 </ul>
 <?php } ?>
@@ -42,7 +42,7 @@
 				<input type="hidden" name="state" value="<?php echo $state; ?>" />
 				<?php } ?>
 
-				<button class="btn" type="submit"><i class="icon i_search">🔍</i></button>
+				<button class="btn" type="submit"><?php echo icon('search'); ?></button>
 			</div>
 		</form>
 		<?php } ?>
@@ -53,7 +53,7 @@
 		<div class="dropdown">
 			<div id="dropdown-configure" class="dropdown-target"></div>
 
-			<a class="btn dropdown-toggle" href="#dropdown-configure"><i class="icon i_configure">⚙</i></a>
+			<a class="btn dropdown-toggle" href="#dropdown-configure"><?php echo icon('configure'); ?></a>
 			<ul class="dropdown-menu">
 				<li class="dropdown-close"><a href="#close">❌</a></li>
 				<li class="dropdown-header"><?php echo Translate::t ('configuration'); ?></li>
@@ -64,7 +64,7 @@
 				<li class="item"><a href="<?php echo _url ('index', 'logs'); ?>"><?php echo Translate::t ('logs'); ?></a></li>
 				<?php if (login_is_conf ($this->conf) && is_logged ()) { ?>
 				<li class="separator"></li>
-				<li class="item"><a class="signout" href="#"><i class="icon i_logout">🔓</i> <?php echo Translate::t ('logout'); ?></a></li>
+				<li class="item"><a class="signout" href="#"><?php echo icon('logout'); ?> <?php echo Translate::t ('logout'); ?></a></li>
 				<?php } ?>
 			</ul>
 		</div>
@@ -73,7 +73,7 @@
 
 	if (login_is_conf ($this->conf) && !is_logged ()) { ?>
 	<div class="item configure">
-		<i class="icon i_login">🔒</i> <a class="signin" href="#"><?php echo Translate::t ('login'); ?></a>
+		<?php echo icon('login'); ?> <a class="signin" href="#"><?php echo Translate::t ('login'); ?></a>
 	</div>
 	<?php } ?>
 </div>
diff --git a/app/layout/layout.phtml b/app/layout/layout.phtml
index 633af16f2..eb0f8b484 100644
--- a/app/layout/layout.phtml
+++ b/app/layout/layout.phtml
@@ -36,7 +36,7 @@
 ?>
 <div class="notification <?php echo $this->notification['type']; ?>">
 	<?php echo $this->notification['content']; ?>
-	<a class="close" href=""><i class="icon i_close">❌</i></a>
+	<a class="close" href=""><?php echo icon('close'); ?></a>
 </div>
 <?php } ?>
 	</body>
diff --git a/app/layout/nav_entries.phtml b/app/layout/nav_entries.phtml
index 49dd4eae1..306c1536d 100644
--- a/app/layout/nav_entries.phtml
+++ b/app/layout/nav_entries.phtml
@@ -1,5 +1,5 @@
 <ul id="nav_entries">
-	<li class="item"><a class="previous_entry" href="#"><i class="icon i_prev">⏪</i></a></li>
-	<li class="item"><a class="up" href="#"><i class="icon i_up">△</i></a></li>
-	<li class="item"><a class="next_entry" href="#"><i class="icon i_next">⏩</i></a></li>
+	<li class="item"><a class="previous_entry" href="#"><?php echo icon('prev'); ?></a></li>
+	<li class="item"><a class="up" href="#"><?php echo icon('up'); ?></a></li>
+	<li class="item"><a class="next_entry" href="#"><?php echo icon('next'); ?></a></li>
 </ul>
\ No newline at end of file
diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index b7fb4a817..affdaaa10 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -1,8 +1,8 @@
 <div class="nav_menu">
-	<a class="btn toggle_aside" href="#aside_flux"><i class="icon i_category">☷</i></a>
+	<a class="btn toggle_aside" href="#aside_flux"><?php echo icon('category-white'); ?></a>
 
 	<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
-	<a id="actualize" class="btn" href="<?php echo _url ('feed', 'actualize'); ?>"><i class="icon i_refresh">↻</i></a>
+	<a id="actualize" class="btn" href="<?php echo _url ('feed', 'actualize'); ?>"><?php echo icon('refresh'); ?></a>
 
 	<?php
 		$get = false;
@@ -62,7 +62,7 @@
 		<div class="dropdown">
 			<div id="dropdown-read" class="dropdown-target"></div>
 
-			<a class="dropdown-toggle btn" href="#dropdown-read"><i class="icon i_down">▽</i></a>
+			<a class="dropdown-toggle btn" href="#dropdown-read"><?php echo icon('down'); ?></a>
 			<ul class="dropdown-menu">
 				<li class="dropdown-close"><a href="#close">❌</a></li>
 
@@ -93,7 +93,7 @@
 	?>
 	<div class="dropdown" id="nav_menu_views">
 		<div id="dropdown-views" class="dropdown-target"></div>
-		<a class="dropdown-toggle btn" href="#dropdown-views"><?php echo Translate::t ('display'); ?> <i class="icon i_down">▽</i></a>
+		<a class="dropdown-toggle btn" href="#dropdown-views"><?php echo Translate::t ('display'); ?> <?php echo icon('down'); ?></a>
 		<ul class="dropdown-menu">
 			<li class="dropdown-close"><a href="#close">❌</a></li>
 
diff --git a/app/views/configure/categorize.phtml b/app/views/configure/categorize.phtml
index 01b5c96bc..cbb5e9e81 100644
--- a/app/views/configure/categorize.phtml
+++ b/app/views/configure/categorize.phtml
@@ -22,7 +22,7 @@
 				(<?php echo Translate::t ('number_feeds', $cat->nbFeed ()); ?>)
 
 				<?php if ($cat->id () == $this->defaultCategory->id ()) { ?>
-				<i class="icon i_help">ⓘ</i> <?php echo Translate::t ('can_not_be_deleted'); ?>
+				<?php echo icon('help'); ?> <?php echo Translate::t ('can_not_be_deleted'); ?>
 				<?php } ?>
 
 				<input type="hidden" name="ids[]" value="<?php echo $cat->id (); ?>" />
diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml
index 38f2ee1d5..4e01be6ef 100644
--- a/app/views/configure/display.phtml
+++ b/app/views/configure/display.phtml
@@ -56,7 +56,7 @@
 			<?php $token = $this->conf->token (); ?>
 			<div class="group-controls">
 				<input type="text" id="token" name="token" value="<?php echo $token; ?>"  placeholder="<?php echo Translate::t ('blank_to_disable'); ?>"/>
-				<i class="icon i_help">ⓘ</i> <?php echo Translate::t('explain_token', Url::display(null, 'html', true), $token); ?>
+				<?php echo icon('help'); ?> <?php echo Translate::t('explain_token', Url::display(null, 'html', true), $token); ?>
 			</div>
 		</div>
 	
@@ -162,12 +162,12 @@
 				<thead>
 					<tr>
 						<th> </th>
-						<th><a class="icon read" title="<?php echo Translate::t ('mark_read'); ?>">☑</a></th>
-						<th><a class="icon bookmark" title="<?php echo Translate::t ('mark_favorite'); ?>">★</a></th>
+						<th title="<?php echo Translate::t ('mark_read'); ?>"><?php echo icon('read'); ?></th>
+						<th title="<?php echo Translate::t ('mark_favorite'); ?>"><?php echo icon('bookmark'); ?></th>
 						<th><?php echo Translate::t ('sharing'); ?></th>
 						<th><?php echo Translate::t ('related_tags'); ?></th>
 						<th><?php echo Translate::t ('publication_date'); ?></th>
-						<th class="link"><a class="icon">↗</a></th>
+						<th><?php echo icon('link'); ?></th>
 					</tr>
 				</thead>
 				<tbody>
@@ -208,7 +208,7 @@
 				<p><a class="btn" href="<?php echo _url('entry', 'optimize'); ?>">
 					<?php echo Translate::t('optimize_bdd'); ?>
 				</a></p>
-				<i class="icon i_help">ⓘ</i> <?php echo Translate::t('optimize_todo_sometimes'); ?>
+				<?php echo icon('help'); ?> <?php echo Translate::t('optimize_todo_sometimes'); ?>
 			</div>
 		</div>
 
diff --git a/app/views/configure/feed.phtml b/app/views/configure/feed.phtml
index 3656dc0a3..8fecec36f 100644
--- a/app/views/configure/feed.phtml
+++ b/app/views/configure/feed.phtml
@@ -29,21 +29,21 @@
 			<label class="group-name"><?php echo Translate::t ('website_url'); ?></label>
 			<div class="group-controls">
 				<input type="text" name="website" id="website" value="<?php echo $this->flux->website (); ?>" />
-				<a target="_blank" href="<?php echo $this->flux->website (); ?>"><i class="icon i_link">↗</i></a>
+				<a target="_blank" href="<?php echo $this->flux->website (); ?>"><?php echo icon('link'); ?></a>
 			</div>
 		</div>
 		<div class="form-group">
 			<label class="group-name"><?php echo Translate::t ('feed_url'); ?></label>
 			<div class="group-controls">
 				<input type="text" name="url" id="url" value="<?php echo $this->flux->url (); ?>" />
-				<a target="_blank" href="<?php echo $this->flux->url (); ?>"><i class="icon i_link">↗</i></a>
+				<a target="_blank" href="<?php echo $this->flux->url (); ?>"><?php echo icon('link'); ?></a>
 			</div>
 		</div>
 		<div class="form-group">
 			<label class="group-name"></label>
 			<div class="group-controls">
 				<a class="btn" href="<?php echo _url ('feed', 'actualize', 'id', $this->flux->id ()); ?>">
-					<i class="icon i_refresh">↻</i> <?php echo Translate::t('actualize'); ?>
+					<?php echo icon('refresh'); ?> <?php echo Translate::t('actualize'); ?>
 				</a>
 			</div>
 		</div>
@@ -85,7 +85,7 @@
 			<label class="group-name" for="path_entries"><?php echo Translate::t ('css_path_on_website'); ?></label>
 			<div class="group-controls">
 				<input type="text" name="path_entries" id="path_entries" value="<?php echo $this->flux->pathEntries (); ?>" placeholder="<?php echo Translate::t ('blank_to_disable'); ?>" />
-				<i class="icon i_help">ⓘ</i> <?php echo Translate::t ('retrieve_truncated_feeds'); ?>
+				<?php echo icon('help'); ?> <?php echo Translate::t ('retrieve_truncated_feeds'); ?>
 			</div>
 		</div>
 
@@ -94,7 +94,7 @@
 			<label class="group-name" for="http_user"><?php echo Translate::t ('http_username'); ?></label>
 			<div class="group-controls">
 				<input type="text" name="http_user" id="http_user" value="<?php echo $auth['username']; ?>" autocomplete="off" />
-				<i class="icon i_help">ⓘ</i> <?php echo Translate::t ('access_protected_feeds'); ?>
+				<?php echo icon('help'); ?> <?php echo Translate::t ('access_protected_feeds'); ?>
 			</div>
 
 			<label class="group-name" for="http_pass"><?php echo Translate::t ('http_password'); ?></label>
diff --git a/app/views/helpers/view/global_view.phtml b/app/views/helpers/view/global_view.phtml
index e555adb9f..f34d368f9 100644
--- a/app/views/helpers/view/global_view.phtml
+++ b/app/views/helpers/view/global_view.phtml
@@ -32,5 +32,5 @@
 
 <div id="overlay"></div>
 <div id="panel"<?php echo $this->conf->displayPosts () === 'no' ? ' class="hide_posts"' : ''; ?>>
-	<a class="close" href="#"><i class="icon i_close">❌</i></a>
+	<a class="close" href="#"><?php echo icon('close'); ?></a>
 </div>
\ No newline at end of file
diff --git a/app/views/helpers/view/normal_view.phtml b/app/views/helpers/view/normal_view.phtml
index fccfd71b4..6a023451f 100644
--- a/app/views/helpers/view/normal_view.phtml
+++ b/app/views/helpers/view/normal_view.phtml
@@ -42,13 +42,13 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 				if ($this->conf->toplineRead ()) {
 					?><li class="item manage"><?php
 						?><a class="read" href="<?php echo _url ('entry', 'read', 'id', $item->id (), 'is_read', $item->isRead () ? 0 : 1); ?>"><?php
-							echo $item->isRead () ? '☑' : '☐'; ?></a><?php
+							echo icon($item->isRead () ? 'read' : 'unread'); ?></a><?php
 					?></li><?php
 				}
 				if ($this->conf->toplineFavorite ()) {
 					 ?><li class="item manage"><?php
 						?><a class="bookmark" href="<?php echo _url ('entry', 'bookmark', 'id', $item->id (), 'is_favorite', $item->isFavorite () ? 0 : 1); ?>"><?php
-							echo $item->isFavorite () ? '★' : '☆'; ?></a><?php
+							echo icon($item->isFavorite () ? 'starred' : 'non-starred'); ?></a><?php
 					?></li><?php
 				}
 			}
@@ -58,7 +58,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 			<li class="item website"><a href="<?php echo _url ('index', 'index', 'get', 'f_' . $feed->id ()); ?>"><img class="favicon" src="<?php echo $feed->favicon (); ?>" alt="✇" /> <span><?php echo $feed->name(); ?></span></a></li>
 			<li class="item title"><a target="_blank" href="<?php echo $item->link (); ?>"><?php echo $item->title (); ?></a></li>
 			<?php if ($this->conf->toplineDate ()) { ?><li class="item date"><?php echo $item->date (); ?> </li><?php } ?>
-			<?php if ($this->conf->toplineLink ()) { ?><li class="item link"><a class="icon" target="_blank" href="<?php echo $item->link (); ?>">↗</a></li><?php } ?>
+			<?php if ($this->conf->toplineLink ()) { ?><li class="item link"><a target="_blank" href="<?php echo $item->link (); ?>"><?php echo icon('link'); ?></a></li><?php } ?>
 		</ul>
 
 		<div class="flux_content">
@@ -79,13 +79,13 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 					if ($this->conf->bottomlineRead ()) {
 						?><li class="item manage"><?php
 							?><a class="read" href="<?php echo _url ('entry', 'read', 'id', $item->id (), 'is_read', $item->isRead () ? 0 : 1); ?>"><?php
-								echo $item->isRead () ? '☑' : '☐'; ?></a><?php
+								echo icon($item->isRead () ? 'read' : 'unread'); ?></a><?php
 						?></li><?php
 					}
 					if ($this->conf->bottomlineFavorite ()) {
 						?><li class="item manage"><?php
 							?><a class="bookmark" href="<?php echo _url ('entry', 'bookmark', 'id', $item->id (), 'is_favorite', $item->isFavorite () ? 0 : 1); ?>"><?php
-								echo $item->isFavorite () ? '★' : '☆'; ?></a><?php
+								echo icon($item->isFavorite () ? 'starred' : 'non-starred'); ?></a><?php
 						?></li><?php
 					}
 				} ?>
@@ -97,7 +97,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 					?>
 						<div class="dropdown">
 						<div id="dropdown-share-<?php echo $item->id ();?>" class="dropdown-target"></div>
-						<i class="icon i_share">♺</i> <a class="dropdown-toggle" href="#dropdown-share-<?php echo $item->id ();?>"><?php echo Translate::t ('share'); ?></a>
+						<?php echo icon('share'); ?> <a class="dropdown-toggle" href="#dropdown-share-<?php echo $item->id ();?>"><?php echo Translate::t ('share'); ?></a>
 
 						<ul class="dropdown-menu">
 							<li class="dropdown-close"><a href="#close">❌</a></li>
@@ -141,7 +141,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 				<li class="item">
 					<div class="dropdown">
 						<div id="dropdown-tags-<?php echo $item->id ();?>" class="dropdown-target"></div>
-						<i class="icon i_tag">⚐</i> <a class="dropdown-toggle" href="#dropdown-tags-<?php echo $item->id ();?>"><?php echo Translate::t ('related_tags'); ?></a>
+						<?php echo icon('tag'); ?> <a class="dropdown-toggle" href="#dropdown-tags-<?php echo $item->id ();?>"><?php echo Translate::t ('related_tags'); ?></a>
 						<ul class="dropdown-menu">
 							<li class="dropdown-close"><a href="#close">❌</a></li>
 							<?php foreach($tags as $tag) { ?>
@@ -152,7 +152,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
 				</li>
 				<?php } ?>
 				<?php if ($this->conf->bottomlineDate ()) { ?><li class="item date"><?php echo $item->date (); ?> </li><?php } ?>
-				<?php if ($this->conf->bottomlineLink ()) { ?><li class="item link"><a class="icon" target="_blank" href="<?php echo $item->link (); ?>">↗</a></li><?php } ?>
+				<?php if ($this->conf->bottomlineLink ()) { ?><li class="item link"><a target="_blank" href="<?php echo $item->link (); ?>"><?php echo icon('link'); ?></a></li><?php } ?>
 			</ul>
 		</div>
 	</div>
diff --git a/lib/lib_rss.php b/lib/lib_rss.php
index 33f8641e1..b968f500f 100644
--- a/lib/lib_rss.php
+++ b/lib/lib_rss.php
@@ -215,3 +215,33 @@ function lazyimg($content) {
 		$content
 	);
 }
+
+function icon($name) {	//<?php echo icon('share');
+	static $alts = array(
+		'add' => '✚',
+		'all' => '☰',
+		'bookmark' => '★',
+		'category' => '☷',
+		'category-white' => '☷',
+		'close' => '❌',
+		'configure' => '⚙',
+		'down' => '▽',
+		'favorite' => '★',
+		'help' => 'ⓘ',
+		'link' => '↗',
+		'login' => '🔒',
+		'logout' => '🔓',
+		'next' => '⏩',
+		'non-starred' => '☆',
+		'prev' => '⏪',
+		'read' => '☑',
+		'unread' => '☐',
+		'refresh' => '🔃',	//↻
+		'search' => '🔍',
+		'share' => '♺',
+		'starred' => '★',
+		'tag' => '⚐',
+		'up' => '△',
+	);
+	return '<i class="icon i_' . $name . '">' . $alts[$name] . '</i>';
+}
diff --git a/public/install.php b/public/install.php
index 68878a5e9..2e6519bf8 100644
--- a/public/install.php
+++ b/public/install.php
@@ -1,5 +1,6 @@
 <?php
 require('../constants.php');
+include(LIB_PATH . '/lib_rss.php');
 
 session_start ();
 
@@ -505,7 +506,7 @@ function printStep2 () {
 			<!-- TODO: if no problem during version 0.6, remove for version 0.7 -->
 			<label class="group-name" for="base_url"><?php echo _t ('base_url'); ?></label>
 			<div class="group-controls">
-				<input type="text" id="base_url" name="base_url" value="<?php echo isset ($_SESSION['base_url']) ? $_SESSION['base_url'] : $url; ?>" /> <i class="icon i_help">ⓘ</i> <?php echo _t ('do_not_change_if_doubt'); ?>
+				<input type="text" id="base_url" name="base_url" value="<?php echo isset ($_SESSION['base_url']) ? $_SESSION['base_url'] : $url; ?>" /> <?php echo @icon('help'); ?> <?php echo _t ('do_not_change_if_doubt'); ?>
 			</div>
 		</div>
 
diff --git a/public/scripts/main.js b/public/scripts/main.js
index e9d300694..8f82fc593 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -43,11 +43,11 @@ function mark_read(active, only_not_read) {
 			$r = active.find("a.read").attr("href", res.url),
 			inc = 0;
 		if (active.hasClass("not_read")) {
-			$r.text('☑');
+			$r.find('.icon').removeClass('i_unread').addClass('i_read').text('☑');
 			active.removeClass("not_read");
 			inc--;
 		} else if (only_not_read !== true || active.hasClass("not_read")) {
-			$r.text('☐');
+			$r.find('.icon').removeClass('i_read').addClass('i_unread').text('☐');
 			active.addClass("not_read");
 			inc++;
 		}
@@ -113,11 +113,11 @@ function mark_favorite(active) {
 			$b = active.find("a.bookmark").attr("href", res.url),
 			inc = 0;
 		if (active.hasClass("favorite")) {
-			$b.text('☆');
+			$b.find('.icon').removeClass('i_starred').addClass('i_non-starred').text('☆');
 			active.removeClass("favorite");
 			inc--;
 		} else {
-			$b.text('★');
+			$b.find('.icon').removeClass('i_non-starred').addClass('i_starred').text('★');
 			active.addClass("favorite").find('.bookmark');
 			inc++;
 		}
diff --git a/public/themes/default/freshrss.css b/public/themes/default/freshrss.css
index 7f57cd51b..04b6c2e93 100644
--- a/public/themes/default/freshrss.css
+++ b/public/themes/default/freshrss.css
@@ -25,9 +25,6 @@
 				margin: 0;
 				text-shadow: 1px -1px 0 #ccc;
 			}
-			.header > .item.title a:hover {
-				text-decoration: none;
-			}
 		.header > .item.search input {
 			width: 230px;
 			transition: width 200ms linear;
@@ -39,6 +36,10 @@
 			width: 100px;
 		}
 
+.item a:hover {
+	text-decoration: none;
+}
+
 #global {
 	display: table;
 	width: 100%;
@@ -70,11 +71,6 @@
 			right: 33px;
 		}
 
-		.aside.aside_flux .i_category {
-			background-image: url("../icons/category-white.png");
-			background-image: url("../icons/category-white.svg");
-		}
-
 	.nav-login {
 		display: none;
 	}
@@ -259,36 +255,6 @@
 			font-size: 0px;
 			text-align: center;
 		}
-			.read {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/read.png") center center no-repeat;
-				background: url("../icons/read.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.read:hover {
-					text-decoration: none;
-				}
-				.flux.not_read .read {
-					background: url("../icons/unread.png") center center no-repeat;
-					background: url("../icons/unread.svg") center center no-repeat;
-				}
-			.bookmark {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/non-starred.png") center center no-repeat;
-				background: url("../icons/non-starred.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.bookmark:hover {
-					text-decoration: none;
-				}
-				.flux.favorite .bookmark {
-					background: url("../icons/starred.png") center center no-repeat;
-					background: url("../icons/starred.svg") center center no-repeat;
-				}
 		.flux_header .item.website {
 			width: 200px;
 			overflow: hidden;
@@ -313,9 +279,6 @@
 				color: #000;
 				outline: none;
 			}
-				.flux_header .item.title a:hover {
-					text-decoration: none
-				}
 			.flux.not_read .flux_header .item.title {
 				font-weight: bold;
 			}
@@ -334,17 +297,6 @@
 			width: 40px;
 			text-align: center;
 		}
-			.link a {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/link.png") center center no-repeat;
-				background: url("../icons/link.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.link a:hover {
-					text-decoration: none;
-				}
 
 #stream.reader .flux {
 	padding: 0 0 30px;
diff --git a/public/themes/default/global.css b/public/themes/default/global.css
index 89668c393..58b4126b0 100644
--- a/public/themes/default/global.css
+++ b/public/themes/default/global.css
@@ -572,6 +572,10 @@ input, select, textarea {
 		background-image: url("../icons/category.png");
 		background-image: url("../icons/category.svg");
 	}
+	.i_category-white {
+		background-image: url("../icons/category-white.png");
+		background-image: url("../icons/category-white.svg");
+	}
 	.i_rss {
 		background-image: url("../icons/rss.png");
 		background-image: url("../icons/rss.svg");
@@ -580,6 +584,14 @@ input, select, textarea {
 		background-image: url("../icons/share.png");
 		background-image: url("../icons/share.svg");
 	}
+	.i_starred {
+		background-image: url("../icons/starred.png");
+		background-image: url("../icons/starred.svg");
+	}
+	.i_non-starred {
+		background-image: url("../icons/non-starred.png");
+		background-image: url("../icons/non-starred.svg");
+	}
 	.i_tag {
 		background-image: url("../icons/tag.png");
 		background-image: url("../icons/tag.svg");
diff --git a/public/themes/flat-design/freshrss.css b/public/themes/flat-design/freshrss.css
index fd0cf5b00..4c15ca138 100644
--- a/public/themes/flat-design/freshrss.css
+++ b/public/themes/flat-design/freshrss.css
@@ -28,9 +28,6 @@ body {
 				display: inline-block;
 				margin: 0;
 			}
-			.header > .item.title a:hover {
-				text-decoration: none;
-			}
 		.header > .item.search input {
 			width: 230px;
 			transition: width 200ms linear;
@@ -42,6 +39,10 @@ body {
 			width: 100px;
 		}
 
+.item a:hover {
+	text-decoration: none;
+}
+
 #global {
 	display: table;
 	width: 100%;
@@ -238,36 +239,6 @@ body {
 			font-size: 0px;
 			text-align: center;
 		}
-			.read {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/read.png") center center no-repeat;
-				background: url("../icons/read.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.read:hover {
-					text-decoration: none;
-				}
-				.flux.not_read .read {
-					background: url("../icons/unread.png") center center no-repeat;
-					background: url("../icons/unread.svg") center center no-repeat;
-				}
-			.bookmark {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/non-starred.png") center center no-repeat;
-				background: url("../icons/non-starred.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.bookmark:hover {
-					text-decoration: none;
-				}
-				.flux.favorite .bookmark {
-					background: url("../icons/starred.png") center center no-repeat;
-					background: url("../icons/starred.svg") center center no-repeat;
-				}
 		.flux_header .item.website {
 			width: 200px;
 			overflow: hidden;
@@ -278,10 +249,6 @@ body {
 			.flux_header .item.website .favicon {
 				padding: 5px;
 			}
-			.flux_header .item.website a {
-				display: block;
-				height: 40px;
-			}
 		.flux_header .item.title {
 			overflow: hidden;
 			white-space: nowrap;
@@ -292,9 +259,6 @@ body {
 				color: #333;
 				outline: none;
 			}
-				.flux_header .item.title a:hover {
-					text-decoration: none
-				}
 			.flux.not_read .flux_header .item.title {
 				font-weight: bold;
 			}
@@ -313,17 +277,6 @@ body {
 			width: 40px;
 			text-align: center;
 		}
-			.link a {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/link.png") center center no-repeat;
-				background: url("../icons/link.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.link a:hover {
-					text-decoration: none;
-				}
 
 #stream.reader .flux {
 	position: relative;
@@ -529,7 +482,6 @@ body {
 			.pagination .item a:hover {
 				color: #ecf0f1;
 				background: #34495e;
-				text-decoration: none;
 			}
 
 #nav_entries {
diff --git a/public/themes/flat-design/global.css b/public/themes/flat-design/global.css
index 7d930c066..f2957d77a 100644
--- a/public/themes/flat-design/global.css
+++ b/public/themes/flat-design/global.css
@@ -556,6 +556,10 @@ input, select, textarea {
 		background-image: url("../icons/category-white.png");
 		background-image: url("../icons/category-white.svg");
 	}
+	.i_category-white {
+		background-image: url("../icons/category-white.png");
+		background-image: url("../icons/category-white.svg");
+	}
 	.i_rss {
 		background-image: url("../icons/rss.png");
 		background-image: url("../icons/rss.svg");
@@ -564,6 +568,14 @@ input, select, textarea {
 		background-image: url("../icons/share.png");
 		background-image: url("../icons/share.svg");
 	}
+	.i_starred {
+		background-image: url("../icons/starred.png");
+		background-image: url("../icons/starred.svg");
+	}
+	.i_non-starred {
+		background-image: url("../icons/non-starred.png");
+		background-image: url("../icons/non-starred.svg");
+	}
 	.i_tag {
 		background-image: url("../icons/tag.png");
 		background-image: url("../icons/tag.svg");