Explain what Ferris means in the Introduction

2018-edition/ferris.css

@@ -27,3 +27,7 @@ body.ayu .not_desired_behavior {
 	width: 10%;
 	height: auto;
 }
+
+.ferris-explain {
+  width: 100px;
+}

2018-edition/ferris.js

@@ -27,10 +27,17 @@ function makeFerris (type) {
   var elements = document.getElementsByClassName(type.attr)
 
   for (var codeBlock of elements) {
-    var img = document.createElement("img")
+    var a = document.createElement('a')
+    a.setAttribute('href', 'ch00-00-introduction.html#ferris')
+    a.setAttribute('target', '_blank')
+
+    var img = document.createElement('img')
     img.setAttribute('src', 'img/ferris/' + type.attr + '.svg')
     img.setAttribute('title', type.title)
     img.className = 'ferris'
-    codeBlock.parentElement.insertBefore(img, codeBlock)
+
+    a.appendChild(img)
+
+    codeBlock.parentElement.insertBefore(a, codeBlock)
   }
 }

2018-edition/src/ch00-00-introduction.md

@@ -162,14 +162,25 @@ There is no wrong way to read this book: if you want to skip ahead, go for it!
 You might have to jump back to earlier chapters if you experience any
 confusion. But do whatever works for you.
 
+<span id="ferris"></span>
+
 An important part of the process of learning Rust is learning how to read the
 error messages the compiler displays: these will guide you toward working code.
 As such, we’ll provide many examples of code that doesn’t compile along with
 the error message the compiler will show you in each situation. Know that if
 you enter and run a random example, it may not compile! Make sure you read the
 surrounding text to see whether the example you’re trying to run is meant to
-error. In most situations, we’ll lead you to the correct version of any code
-that doesn’t compile.
+error. Ferris will also help you distinguish code that isn't meant to work:
+
+| Ferris                                                                 | Meaning                                          |
+|------------------------------------------------------------------------|--------------------------------------------------|
+| <img src="img/ferris/does_not_compile.svg" class="ferris-explain">     | This code does not compile!                      |
+| <img src="img/ferris/panics.svg" class="ferris-explain">               | This code panics!                                |
+| <img src="img/ferris/unsafe.svg" class="ferris-explain">               | This code block contains unsafe code.            |
+| <img src="img/ferris/not_desired_behavior.svg" class="ferris-explain"> | This code does not produce the desired behavior. |
+
+In most situations, we’ll lead you to the correct version of any code that
+doesn’t compile.
 
 ## Source Code