Add material icons as font faces (#95)

* Add icons as font faces

* Update MaterialIcon.vue

* Fix requested changes
This commit is contained in:
Andreas E 2019-11-22 23:50:56 +01:00 committed by arkon
parent b3edc5edd2
commit 7a22f4d2aa
6 changed files with 49 additions and 4 deletions

10
package-lock.json generated
View File

@ -868,6 +868,11 @@
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.7.tgz",
"integrity": "sha512-YCw2Q2m4fxzyFsPOH3uDYMoJztTD+pT+AAyse4LFpbdrBg+r8ueaVT8BFnXEjrGwMDJJeXrwJ5AOC6q/JWBI4w=="
},
"@mdi/font": {
"version": "4.5.95",
"resolved": "https://registry.npmjs.org/@mdi/font/-/font-4.5.95.tgz",
"integrity": "sha512-AjR2Zgu1feBXWlTfEjD6JQqLAMCqYn2Gzia5PWqFnysvz5F6JmPHtQFldIHXqyv2s/FwME7ZDBc5N86NEHbyvQ=="
},
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -6273,6 +6278,11 @@
"integrity": "sha512-TAIHTHPwa9+ltKvKPWulm/beozQU41Ab+FIefRaQV1NRnpzwcV9QOe6wXQS5WLivm5Q/nlo0rl6laGkMDZE7Gw==",
"dev": true
},
"material-design-icons": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
"integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

View File

@ -21,10 +21,12 @@
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/vue-fontawesome": "^0.1.7",
"@mdi/font": "^4.5.95",
"axios": "^0.19.0",
"iso-639-1": "^2.1.0",
"lodash.groupby": "^4.6.0",
"lodash.sortby": "^4.7.0",
"material-design-icons": "^3.0.1",
"vue-agile": "^1.0.11",
"vuepress-plugin-clean-urls": "^1.0.3",
"vuepress-plugin-container": "^2.0.2"

View File

@ -33,7 +33,6 @@ export default {
<style scoped>
.material-holder {
font-family: 'Material Design Icons', 'Material Icons', sans-serif;
color: #476582;
margin: 0;
font-size: 0.85em;
@ -42,12 +41,26 @@ export default {
}
.material-icons {
font-family: 'Material Icons';
font-size: 1.35em;
font-style: normal;
position: relative;
top: 0.2rem;
font-weight: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-legacy-icons {
font-family: 'Material Design Icons';
font-size: 1.35em;
font-style: normal;
}
</style>

View File

@ -3,11 +3,8 @@ module.exports = {
description: 'Free and open source manga reader for Android.',
dest: './public',
head: [
['link', { rel: "preconnect", href: 'https://cdn.materialdesignicons.com/', crossorigin:""} , ''],
['link', { rel: "preconnect", href: 'https://fonts.gstatic.com', crossorigin:""} , ''],
['link', { rel: "stylesheet", href: 'https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css', crossorigin:""} , ''],
['link', { rel: "stylesheet", href: 'https://fonts.googleapis.com/css?family=Open+Sans'} , ''],
['link', { rel: "stylesheet", href: 'https://fonts.googleapis.com/icon?family=Material+Icons'} , '']
],
themeConfig: {
repo: 'inorichi/tachiyomi',

View File

@ -1,4 +1,5 @@
import './styles/index.scss';
import './styles/fonts.scss'
import { library } from '@fortawesome/fontawesome-svg-core';
import { faDownload } from '@fortawesome/free-solid-svg-icons';

View File

@ -0,0 +1,22 @@
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url("~material-design-icons/iconfont/MaterialIcons-Regular.eot");
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url("~material-design-icons/iconfont/MaterialIcons-Regular.woff2") format("woff2"),
url("~material-design-icons/iconfont/MaterialIcons-Regular.woff") format("woff"),
url("~material-design-icons/iconfont/MaterialIcons-Regular.ttf") format("truetype"),
url("~material-design-icons/iconfont/MaterialIcons-Regular.svg#MaterialIcons-Regular") format("svg");
}
@font-face {
font-family: "Material Design Icons";
src: url("~@mdi/font/fonts/materialdesignicons-webfont.eot");
src: local('Material Design Icons'),
local('Material-Design-Icons'),
url("~@mdi/font/fonts/materialdesignicons-webfont.woff2") format("woff2"),
url("~@mdi/font/fonts/materialdesignicons-webfont.woff") format("woff"),
url("~@mdi/font/fonts/materialdesignicons-webfont.ttf") format("truetype");
}