Showing a custom icon for each link.

An image URL can be specified for each link as fourth
attribute, after a (possibly empty) shortcut.
Showing images for links can be disabled through
'icons.showIcons' configuration parameter.

I also increased block width from '140px' to '160px'
considering spaced possibly required by icons.

index.html

@@ -56,7 +56,7 @@
 -->
 
 Title 1
-http://google.com || Google yeah || g
+http://google.com || Google yeah || g || images/icon.png
 http://deviantart.com || dA || da
 
 Title 2

js/script.js

@@ -59,6 +59,10 @@ var settings = {
 
 	"animation": {
 		"hideLinks": true
+	},
+
+	"icons": {
+		"showIcons": true
 	}
 };
 
@@ -141,25 +145,37 @@ $(document).ready(function() {
 			continue;
 		}
 
-		/*  Split URL and Title  *\
+		/*  Split URL, Title and icon (if any) *\
 		\*=======================*/
 		var lineArray = line.split(" || ");
 		var url = lineArray[0];
 		var title = lineArray[1];
 
+		var icon = "";
+		if (lineArray[3]) {
+			icon = lineArray[3];
+		}
+
 		/*  Add to shortcuts array *\
 		\*=========================*/
 		if(lineArray[2]) {
 			shortcuts[lineArray[2]] = "'"+url+"'";
 		}
 
+		/* Prepares HTML code for showing icon *\
+		\*=====================================*/
+		var iconHtml = '';
+		if (settings.icons.showIcons && icon) {
+			iconHtml = '<img src="' + icon + '"/>'; 
+		}
+
 		/*  Add HTML code  *\
 		\*=================*/
 		if(settings.navigation.newWindow) {
-			html = html + '<li><a href="' + url + '" target="_blank">' + title + '</a></li>'
+			html = html + '<li>' + iconHtml + '<a href="' + url + '" target="_blank">' + title + '</a></li>'
 		}
 		else {
-			html = html + '<li><a href="' + url + '">' + title + '</a></li>'
+			html = html + '<li>' + iconHtml + '<a href="' + url + '">' + title + '</a></li>'
 		}
 	}
 

style/style.css

@@ -52,7 +52,7 @@ a:hover {
 	border-left: 1px solid #999;						/* Left border of link block */
 	float: left;
 	padding: 1em;														/* Padding around link block */
-	width: 140px;														/* Link block width */
+	width: 160px;														/* Link block width */
 }
 
 h1 {
@@ -69,6 +69,13 @@ ul li {
 	padding: 5px;
 }
 
+li img {
+	width: 16px;
+	border-width: 0;
+	margin: 5px;
+	vertical-align: middle;
+}
+
 #searches {
 	position: absolute;											/* Position search box */
 	top: 2em;																/*		from top edge */