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

4 files changed, 32 insertions, 104 deletions

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");