Use Fork Awesome as the default icon font, and rework settings

In 16e3058, a FONT_AWESOME setting was introduced and used as such:

    "https://kit.fontawesome.com/{{ FONT_AWESOME }}.js"

Also in 16e3058, the default way to fetch Font Awesome was changed to
Javascript (before we used to load is as CSS).

The present commit does several changes:

- Revert the default back to CSS (instead of JS), as I think that for a
  font, there's no need for Javascript. A font is a static asset, so
  it's enough to load it as a static CSS file, both for privacy and
  security. Also, think about those who disable JS in their browser.
- Remove the `FONT_AWESOME` setting, as it's a bit too limiting to force
  users into `kit.fontawesome.com`, it doesn't leave much space for
  configuration.
- Instead, introduce two variables `FONT_AWESOME_CSS` and
  `FONT_AWESOME_JS`, so that users have more freedom to define how they
  want to load the Font Awesome.
- Use Fork Awesome as the default, if no setting is given by user.
  Meaning that we get back to the `fa` css classes (instead of `fas` or
  `fab`)

README.md

@@ -26,4 +26,11 @@ Additional settings:
 
 - `BIO` - short biography to display in the sidebar, eg. `Hello world`
 - `PROFILE_IMAGE` - image to display in the sidebar, eg. `avatar.png`
-- `FONT_AWESOME` - Fontawesome kit, eg `https://kit.fontawesome.com/{{ FONT_AWESOME }}.js`
+- `FONT_AWESOME_CSS` - URL to get Font Awesome as CSS
+- `FONT_AWESOME_JS` - URL to get Font Awesome as Javascript
+
+By default, the theme uses **Fork Awesome**, which is fetched from
+`cdn.jsdelivr.net`. Fork Awesome is a drop-in replacement for Font Awesome v4,
+but is not compatible with Font Awesome v5 and later, so if you want to use
+Font Awesome v5+, setting `FONT_AWESOME_CSS` is not enough, you will also need
+to modify the templates.

templates/base.html

@@ -28,10 +28,12 @@
 		<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/hyde.css" />
 		<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/syntax.css" />
 		<link rel="stylesheet" href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css">
-		{% if FONT_AWESOME %}
+		{% if FONT_AWESOME_JS %}
-			<script src="https://kit.fontawesome.com/{{ FONT_AWESOME }}.js" crossorigin="anonymous"></script>
+			<script src="{{ FONT_AWESOME_JS }}" crossorigin="anonymous"></script>
+		{% elif FONT_AWESOME_CSS %}
+			<link rel="stylesheet" href="{{ FONT_AWESOME_CSS }}" crossorigin="anonymous">
 		{% else %}
-			<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" crossorigin="anonymous"></script>
+			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" crossorigin="anonymous">
 		{% endif %}
 
 		<!-- Feeds -->

templates/sidebar.html

@@ -16,7 +16,7 @@
 			{% for name, link in SOCIAL %}
 				{% if name == 'email' %}
 					<a class="sidebar-nav-item" href="mailto:{{ link }}">
-						<i class="fas fa-envelope"></i>
+						<i class="fa fa-envelope"></i>
 					</a>
 				{% elif name in ['academia', 'acclaim', 'acm', 'acmdl', 'ads', 'arxiv',
 						 'biorxiv', 'ceur', 'coursera', 'cv', 'dataverse',
@@ -31,12 +31,12 @@
 					</a>
 				{% else %}
 					<a class="sidebar-nav-item" href="{{ link }}">
-						<i class="fab fa-{{ name }}"></i>
+						<i class="fa fa-{{ name }}"></i>
 					</a>
 				{% endif %}
 			{% endfor %}
 			<a class="sidebar-nav-item" href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM if FEED_ALL_ATOM else FEED_ALL_RSS }}">
-				<i class="fas fa-rss"></i>
+				<i class="fa fa-rss"></i>
 			</a>
 		</nav>
 	</div>