added icons

Author: btskinner

_layouts/default.html

@@ -16,6 +16,7 @@
     <script src="https://api.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js"></script>
     <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
     {% if page.custom_js %}
     {% for js_file in page.custom_js %}
     <script src="{{ site.baseurl }}/js/{{ js_file }}.js" type="text/javascript"></script>

css/main.css

@@ -231,3 +231,8 @@ table {
 .num {
     text-align: center;
 }
+
+.icon {
+    width: 3%;
+    padding-right: .5rem;
+}

index.md

@@ -20,14 +20,15 @@ custom_js:
 		<p>Use this interactive map to explore college advising resources
 	available in high schools and communities across the country.</p>
 		<h3>Instructions</h3>
-		<p><b>Search</b> for specific location using place name or zip
-	code. For example, search "Charlottesville, VA" or "22901"</p>
-		<p><b>Use location button</b> to explore current
-	location.</p>
-		<p><b>Drag and zoom</b> using buttons or on map itself.</p>
+		<p><img src='{{ site.baseurl }}{{ site.images }}/search.png' class='icon'>
+			<b>Search</b> using place name ("Charlottesville, VA") or zip code ("22901")</p>
+		<p><img src='{{ site.baseurl }}{{ site.images }}/locate.png' class='icon'>
+			<b>Use the location button</b> to zoom to your current location.</p>
+		<p><i class='far fa-hand-pointer fa-lg' style='padding-right:.5rem;'></i>
+			<b>Drag, click, and zoom</b> to manually explore.</p>
 		<p>Click the toggle buttons in the upper left to: </p>
 		<ul>
-		<li>Hide college icons</li>
+		<li>Hide / show college icons</li>
 		<li>Resize high school icon size by student/counselor ratio (SCR)</li>
 		</ul>
 		</div>