Improved design of mailto and broken links.

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2017-03-21 - Improved design of mailto and broken links.
 * 2017-03-21 - Setting to change position and style of the login form to work out with a greater variety of background images.
 * 2017-03-21 - Update to change 2017-03-09: Added setting to be able to decide if  the additional edit on / off button should be placed.
 * 2017-03-17 - Added back to top button with smooth scrolling.

README.md

@@ -109,6 +109,10 @@ The course settings icon will now be displayed on all sites that renders the cou
 
 We added a back to top button that appears in the right bottom corner when the user scrolls down the page. With a click on it the page scrolls back to top smoothly and the button will disappear again.
 
+### Design
+
+* Added Font Awesome icons to mailto and broken links. Furthermore, colored broken link in red for fast recognizability.
+
 
 Further information
 -------------------

scss/post.scss

@@ -290,6 +290,30 @@ body.path-course-view #section-0 h3.accesshide {
 }
 
 
+/*------------------------------------
+  General improvements
+  -------------------------------------*/
+
+/* Mark broken links with red color. */
+a[href*="/brokenfile.php"] {
+    color: $brand-danger;
+}
+
+/* Add Font Awesome "broken chain" icon in front of broken link. */
+a[href*="/brokenfile.php"]::before {
+    font-family: FontAwesome;
+    content: "\f127" !important;
+    padding-right: 10px;
+}
+
+/* Add Font Awesome "email" icon in front of mailto links. */
+a[href^="mailto"]::before {
+    font-family: FontAwesome;
+    content: "\f003";
+    padding-right: 5px;
+}
+
+
 /*------------------------------------
   Additional Elements
   -------------------------------------*/