マテリアルアイコンの導入実験

Hubzillaで現在のテーマをすぐに置き換えず、テスト用のテーマを別に作成して適用してください。
2019-05-01 16:11:32 +09:00 · 2019-05-01 16:11:32 +09:00 · b73c4f8f74
commit b73c4f8f74
parent c4acf18a46
3 changed files with 67 additions and 0 deletions
--- a/view/theme/plusfuture/css/icons.css
+++ b/view/theme/plusfuture/css/icons.css
@ -0,0 +1,58 @@
+/* include icon font */
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+  
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+  
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+  }
+
+/* material icon font settings */
+.fa-th,
+.fa-community,
+.fa-group,
+.fa-users,
+.fa-stack-exchange,
+.fa-user-circle,
+.fa-address-book,
+.fa-street-view,
+.fa-bell,
+.fa-cog,
+.fa-gear,
+.fa-search,
+.fa-question-circle,
+.fa-smile-o,
+.fa-thumbs-o-up,
+.fa-thumbs-o-down {
+    font-family: "Material Icons Extended";
+}
+
+.fa-th::before { content: "apps" }
+.fa-community::before, .fa-group::before, .fa-users::before { content: "people" }
+.fa-stack-exchange::before { content: "view_headline" }
+.fa-user-circle::before { content: "account_circle" }
+.fa-address-book::before { content: "contacts" }
+.fa-street-view::before { content: "" }
+.fa-bell::before { content: "notifications" }
+.fa-cog::before, .fa-gear::before { content: "settings" }
+.fa-search::before { content: "search" }
+.fa-question-circle::before { content: "help" }
+.fa-smile-o::before { content: "insert_emoticon" }
+.fa-thumbs-o-up::before { content: "thumb_up" }
+.fa-thumbs-o-down::before { content: "thumb_down" }
--- a/view/theme/plusfuture/css/style.css
+++ b/view/theme/plusfuture/css/style.css
@ -2284,3 +2284,7 @@ nav .navbar-nav > .text-truncate {
  position: absolute;
  left: -215px;
 }
+
+.p-2 {
+  padding: 16px !important;
+}
--- a/view/theme/plusfuture/tpl/navbar_default.tpl
+++ b/view/theme/plusfuture/tpl/navbar_default.tpl
@ -1,3 +1,8 @@
+<head>
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+</head>
+
 <div style="display: flex;">
 	<button id="expand-aside" type="button" class="d-lg-none navbar-toggler border-0" data-toggle="offcanvas" data-target="#region_1">
 		<i class="fa fa-bars" id="expand-aside-icon"></i>