WIP: apply bootstrap theme

* apply Simple Line Icons

lib/views/layout/layout.html

@@ -186,12 +186,12 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
             <img src="{{ user|picture }}" class="picture img-circle" width="25" /> {{ user.name }}
           </a>
           <ul class="dropdown-menu">
-            <li><a href="/user/{{ user.username }}"><i class="fa-fw ti-home"></i>{{ t('Home') }}</a></li>
-            <li><a href="/me"><i class="fa-fw ti-settings"></i>{{ t('User Settings') }}</a></li>
+            <li><a href="/user/{{ user.username }}"><i class="icon-fw icon-home"></i>{{ t('Home') }}</a></li>
+            <li><a href="/me"><i class="icon-fw icon-wrench"></i>{{ t('User Settings') }}</a></li>
             <li role="separator" class="divider"></li>
-            <li><a href="/trash"><i class="fa-fw ti-trash"></i>{{ t('Deleted Pages') }}</a></li>
+            <li><a href="/trash"><i class="icon-fw icon-trash"></i>{{ t('Deleted Pages') }}</a></li>
             <li role="separator" class="divider"></li>
-            <li><a href="/logout"><i class="fa-fw ti-power-off"></i>{{ t('Sign out') }}</a></li>
+            <li><a href="/logout"><i class="icon-fw icon-power"></i>{{ t('Sign out') }}</a></li>
           </ul>
           <!-- /.dropdown-messages -->
         </li>

lib/views/page.html

@@ -42,19 +42,19 @@
 
 {% block content_main_before %}
   {% if page.isDeleted() %}
-  <div class="alert alert-danger alert-trash d-flex align-items-center justify-content-between">
+  <div class="alert alert-warning alert-trash d-flex align-items-center justify-content-between">
     <div>
-      <i class="fa fa-trash-o" aria-hidden="true"></i>
+      <i class="icon-trash" aria-hidden="true"></i>
       This page is in the trash.<br>
       Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm img-circle"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
     </div>
     {% if user %}
     <ul class="list-inline">
       <li>
-        <a href="#" class="btn btn-default btn-sm" data-target="#putBackPage" data-toggle="modal"><i class="fa fa-undo" aria-hidden="true"></i> {{ t('Put Back') }}</a>
+        <a href="#" class="btn btn-default btn-rounded btn-sm" data-target="#putBackPage" data-toggle="modal"><i class="icon-action-undo" aria-hidden="true"></i> {{ t('Put Back') }}</a>
       </li>
       <li>
-        <a href="#" class="btn btn-danger btn-sm" data-target="#deletePage" data-toggle="modal"><i class="fa fa-times-circle" aria-hidden="true"></i> {{ t('Delete Completely') }}</a>
+        <a href="#" class="btn btn-danger btn-rounded btn-sm" data-target="#deletePage" data-toggle="modal"><i class="icon-fire" aria-hidden="true"></i> {{ t('Delete Completely') }}</a>
       </li>
     </ul>{# /.pull-right #}
     {% endif %}
@@ -123,7 +123,7 @@
   <ul class="nav nav-tabs hidden-print">
     <li class=" {% if not req.body.pageForm %}active{% endif %}" data-toggle="tooltip" {# data-title="あなたの 確認待ち です" title="" data-placement="bottom" data-trigger="manual" data-tooltip-stay #}>
       <a href="#revision-body" data-toggle="tab">
-      <i class="ti-control-play"></i> View
+      <i class="icon-control-play"></i> View
       {#
         <span class="label label-danger" style=""> 承認待ち</span>
       #}
@@ -142,12 +142,12 @@
         <i class="icon-options-vertical"></i>
       </a>
       <ul class="dropdown-menu">
-       <li><a href="#" data-target="#renamePage" data-toggle="modal"><i class="fa-fw ti-location-arrow"></i> {{ t('Move') }}</a></li>
+       <li><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move') }}</a></li>
        <li class="divider"></li>
-       <li><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="fa-fw ti-files"></i> {{ t('Duplicate') }}</a></li>
+       <li><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
        {% if isDeletablePage() %}
        <li class="divider"></li>
-       <li class=""><a href="#" data-target="#deletePage" data-toggle="modal"><i class="fa-fw ti-trash text-danger"></i> {{ t('Delete') }}</a></li>
+       <li class=""><a href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a></li>
        {% endif %}
       </ul>
     </li>

lib/views/page_list.html

@@ -89,7 +89,7 @@
     <li class=" {% if not req.body.pageForm %}active{% endif %}">
       {% if page %}
       <a href="#revision-body" data-toggle="tab">
-        <i class="ti-control-play"></i> View
+        <i class="icon-control-play"></i> View
       </a>
       {% else %}
       <a>Create Portal: {{ path }}</a>

resource/styles/scss/crowi.scss

@@ -373,6 +373,13 @@ input.searching {
   }
 }
 
+// transplant from FontAwesome
+.icon-fw {
+  width: 20px;
+  display: inline-block;
+  text-align: left;
+}
+
 .cmd-key.mac {
   &:after {
     content: '⌘';