diff --git a/src/App.scss b/src/App.scss
index 06915e16b26992fc771849ae6d32f731cc6efbe9..6884f314dffdb505a0040b9cd7abe014b3193a27 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -812,14 +812,18 @@ nav {
}
}
-.button-icon {
- &.svg-inline--fa.fa-lg {
- display: inline-block;
- padding: 0 0.3em;
+.fa-scale-110 {
+ &.svg-inline--fa {
font-size: 1.1em;
}
}
+.fa-old-padding {
+ &.svg-inline--fa {
+ padding: 0 0.3em;
+ }
+}
+
@keyframes shakeError {
0% {
transform: translateX(0);
diff --git a/src/App.vue b/src/App.vue
index c27f51bf9c6551d3a24ff145cd67a68ff1214b4c..6e44c7e9a46430696130df03c74973a210fe2452 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,8 +53,7 @@
>
<FAIcon
fixed-width
- size="lg"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="cog"
:title="$t('nav.preferences')"
/>
@@ -66,8 +65,7 @@
target="_blank"
><FAIcon
fixed-width
- size="lg"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="tachometer-alt"
:title="$t('nav.administration')"
/></a>
@@ -78,8 +76,7 @@
@click.prevent="logout"
><FAIcon
fixed-width
- size="lg"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
:title="$t('login.logout')"
/></a>
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 8f02a699c04beb7cf1cefe62cb296c45f947d488..f3894a3a9c269abfbcb668c4d183da162766c101 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -20,8 +20,7 @@
<div class="input-wrap">
<div class="input-search">
<FAIcon
- size="lg"
- class="search-icon button-icon"
+ class="search-icon fa-scale-110 fa-old-padding"
icon="search"
/>
</div>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 4bf1e62af842f41a578b7dceadbdb98099efe775..f32ea02d20045924b2cac0d12a5b1d7e7f69bb70 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -107,7 +107,7 @@
</div>
<span slot="trigger">
<FAIcon
- class="ExtraButtons button-icon"
+ class="ExtraButtons fa-scale-110 fa-old-padding"
icon="ellipsis-h"
size="md"
/>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 6c7bfdabb0f40ed229a875b0f070fa1f08ec8aab..dfe12f86734fd5d99fae886b8d5bbdb20968378e 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -2,11 +2,10 @@
<div v-if="loggedIn">
<FAIcon
:class="classes"
- class="FavoriteButton button-icon -interactive"
+ class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
:title="$t('tool_tip.favorite')"
:icon="[status.favorited ? 'fas' : 'far', 'star']"
:spin="animated"
- size="lg"
@click.prevent="favorite()"
/>
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
@@ -14,10 +13,9 @@
<div v-else>
<FAIcon
:class="classes"
- class="FavoriteButton button-icon"
+ class="FavoriteButton fa-scale-110 fa-old-padding"
:title="$t('tool_tip.favorite')"
:icon="['far', 'star']"
- size="lg"
/>
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
</div>
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 06b6af9c44b5f173b702221f288f6797da4c9980..8a33b9eb711209fc2d49df8b72eef0500c889c21 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -10,7 +10,7 @@
{{ $t(notice.messageKey, notice.messageArgs) }}
</div>
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
@click="closeNotice(notice)"
/>
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 605f7427f58e0caf590730193e888402e7762559..75def6125e3179b0315bf02407d60b47b5e05ce0 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -43,7 +43,7 @@
>
{{ submitErrorMsg }}
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError"
/>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 4ab5d192652b53728fb8c06acbc09f0e49ad8204..a1f77210d65ab35ea143694f75ba11f0bb61c3cd 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -77,7 +77,7 @@
<div class="alert error">
{{ error }}
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError"
/>
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index f6526d2afcd96f99a7051f1647a6f56ccc7e2c45..789536494b8abe0c296e18c92d0318b17e553b23 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -55,7 +55,7 @@
<div class="alert error">
{{ error }}
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError"
/>
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 0c6412eaecc6e650f0d92d2e807514965edbc312..9401cad554d2c9ab5d0c0766d7d35e2034878a2e 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -58,7 +58,7 @@
{{ error }}
<FAIcon
size="lg"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError"
/>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index db9b0ba0b0d37095b69f38b8b9ad2c360b596709..d2bc65ab277ddc6f707fa1eab93541e897a5399c 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -16,8 +16,7 @@
@click.stop.prevent="toggleMobileSidebar()"
>
<FAIcon
- size="lg"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="bars"
/>
<div
@@ -42,8 +41,7 @@
@click.stop.prevent="openMobileNotifications()"
>
<FAIcon
- size="lg"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="bell"
/>
<div
@@ -68,8 +66,7 @@
@click.stop.prevent="closeMobileNotifications()"
>
<FAIcon
- size="lg"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
/>
</a>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 4755d7b7576159d5efb9049c0437868af01dd6cd..e7301328304acfefe1ea5fcf109e00898ebd80f7 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -9,22 +9,18 @@
>
<FAIcon
fixed-width
- size="lg"
- class="button-icon"
+ class="fa-scale-110"
icon="home"
- />
- {{ $t("nav.timelines") }}
+ />{{ $t("nav.timelines") }}
</router-link>
</li>
<li v-if="currentUser">
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
<FAIcon
fixed-width
- size="lg"
- class="button-icon"
+ class="fa-scale-110"
icon="bell"
- />
- {{ $t("nav.interactions") }}
+ />{{ $t("nav.interactions") }}
</router-link>
</li>
<li v-if="currentUser && pleromaChatMessagesAvailable">
@@ -37,22 +33,18 @@
</div>
<FAIcon
fixed-width
- size="lg"
- class="button-icon"
+ class="fa-scale-110"
icon="comments"
- />
- {{ $t("nav.chats") }}
+ />{{ $t("nav.chats") }}
</router-link>
</li>
<li v-if="currentUser && currentUser.locked">
<router-link :to="{ name: 'friend-requests' }">
<FAIcon
fixed-width
- size="lg"
- class="button-icon"
+ class="fa-scale-110"
icon="user-plus"
- />
- {{ $t("nav.friend_requests") }}
+ />{{ $t("nav.friend_requests") }}
<span
v-if="followRequestCount > 0"
class="badge follow-request-count"
@@ -65,8 +57,7 @@
<router-link :to="{ name: 'about' }">
<FAIcon
fixed-width
- size="lg"
- class="button-icon"
+ class="fa-scale-110"
icon="info-circle"
/>{{ $t("nav.about") }}
</router-link>
@@ -94,7 +85,7 @@
}
.follow-request-count {
- margin: -6px 10px;
+ vertical-align: bottom;
background-color: $fallback--bg;
background-color: var(--input, $fallback--faint);
}
@@ -126,7 +117,8 @@
a {
display: block;
- padding: 0.8em 0.85em;
+ align-items: stretch;
+ padding: 0.9em 1em;
&:hover {
background-color: $fallback--lightBg;
@@ -156,13 +148,8 @@
}
}
- .button-icon {
- margin-left: -0.1em;
- margin-right: 0.2em;
- }
-
- .button-icon:before {
- width: 1.1em;
+ .fa-scale-110 {
+ margin-right: 0.8em;
}
}
</style>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index b609ae043949aa33dfbfba08a2e544bf02b43695..2bbde10898ef90cd8b91e62ba15553a4b45829e5 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -19,7 +19,7 @@
class="unmute"
@click.prevent="toggleMute"
><FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="eye-slash"
/></a>
</div>
@@ -137,7 +137,7 @@
href="#"
@click.prevent="toggleMute"
><FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="eye-slash"
/></a>
</span>
@@ -157,13 +157,13 @@
>
<FAIcon
icon="check"
- class="button-icon follow-request-accept"
+ class="fa-scale-110 fa-old-padding follow-request-accept"
:title="$t('tool_tip.accept_follow_request')"
@click="approveUser()"
/>
<FAIcon
icon="times"
- class="button-icon follow-request-reject"
+ class="fa-scale-110 fa-old-padding follow-request-reject"
:title="$t('tool_tip.reject_follow_request')"
@click="denyUser()"
/>
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 3fe42b848a002b73944b9e358f03f1789fa9a21d..0deb9ccf4c00f7995da216de772fdee1f6b0a2b3 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -63,7 +63,7 @@
>
<span>{{ error }}</span>
<a
- class="button-icon dismiss"
+ class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissError()"
>
<FAIcon icon="times" />
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9cf38a9ac24ed61baf2f12675e58ac8a324b30e0..a427bb98bbfaaeda8567f9ad6b23728f2429d9c5 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -37,7 +37,7 @@
>
<span>{{ $t('post_status.scope_notice.public') }}</span>
<a
- class="button-icon dismiss"
+ class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissScopeNotice()"
>
<FAIcon icon="times" />
@@ -49,7 +49,7 @@
>
<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
<a
- class="button-icon dismiss"
+ class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissScopeNotice()"
>
<FAIcon icon="times" />
@@ -61,7 +61,7 @@
>
<span>{{ $t('post_status.scope_notice.private') }}</span>
<a
- class="button-icon dismiss"
+ class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissScopeNotice()"
>
<FAIcon icon="times" />
@@ -83,7 +83,7 @@
@click.stop.prevent="togglePreview"
>
{{ $t('post_status.preview') }}
- <i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
+ <FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
</a>
<FAIcon
v-show="previewLoading"
@@ -289,8 +289,7 @@
>
Error: {{ error }}
<FAIcon
- class="button-icon"
- size="lg"
+ class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError"
/>
@@ -302,7 +301,7 @@
class="media-upload-wrapper"
>
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
@click="removeMediaFile(file)"
/>
@@ -389,7 +388,6 @@
}
.preview-toggle {
- display: flex;
cursor: pointer;
user-select: none;
@@ -524,7 +522,7 @@
position: relative;
}
- .button-icon {
+ .fa-scale-110 fa-old-padding {
position: absolute;
margin: 10px;
margin: .75em;
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 8395d5e3fe18988fd13eb925461bdd5dcdd4da59..694e6470bf03aedd42f988a51d32746e0e169c6f 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -38,9 +38,8 @@
</div>
<FAIcon
slot="trigger"
- class="button-icon add-reaction-button"
+ class="fa-scale-110 fa-old-padding add-reaction-button"
:icon="['far', 'smile-beam']"
- size="lg"
:title="$t('tool_tip.add_reaction')"
/>
</Popover>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index ae7b0e26c472faa0110ad2e921441fc98de4366f..a0ac89416b875c060d343622b1a2edcb56b30822 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -2,9 +2,8 @@
<div>
<FAIcon
v-if="loggedIn"
- class="ReplyButton button-icon -interactive"
+ class="ReplyButton fa-scale-110 fa-old-padding -interactive"
icon="reply"
- size="lg"
:title="$t('tool_tip.reply')"
:class="{'-active': replying}"
@click.prevent="$emit('toggle')"
@@ -12,8 +11,7 @@
<FAIcon
v-else
icon="reply"
- size="lg"
- class="ReplyButton button-icon"
+ class="ReplyButton fa-scale-110 fa-old-padding"
:title="$t('tool_tip.reply')"
/>
<span v-if="status.replies_count > 0">
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 706c6b81852b4f25a7587bfa2f79e72113b7845b..b234f3d914517ae9bb34895c54cf752ea4c2be78 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -3,9 +3,8 @@
<template v-if="visibility !== 'private' && visibility !== 'direct'">
<FAIcon
:class="classes"
- class="RetweetButton button-icon -interactive"
+ class="RetweetButton fa-scale-110 fa-old-padding -interactive"
icon="retweet"
- size="lg"
:spin="animated"
:title="$t('tool_tip.repeat')"
@click.prevent="retweet()"
@@ -15,9 +14,8 @@
<template v-else>
<FAIcon
:class="classes"
- class="RetweetButton button-icon"
+ class="RetweetButton fa-scale-110 fa-old-padding"
icon="lock"
- size="lg"
:title="$t('timeline.no_retweet_hint')"
/>
</template>
@@ -25,9 +23,8 @@
<div v-else-if="!loggedIn">
<FAIcon
:class="classes"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="retweet"
- size="lg"
:title="$t('tool_tip.repeat')"
/>
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index a43af23b68c1c42ea8b68fd64bb034cd78f3c10b..a22a4fda94aa423d75a217b68c46cc55933247b2 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -12,8 +12,7 @@
>
<FAIcon
icon="envelope"
- class="button-icon"
- size="lg"
+ class="fa-scale-110 fa-old-padding"
/>
</span>
<span
@@ -25,8 +24,7 @@
>
<FAIcon
icon="lock"
- class="button-icon"
- size="lg"
+ class="fa-scale-110 fa-old-padding"
/>
</span>
<span
@@ -38,8 +36,7 @@
>
<FAIcon
icon="lock-open"
- class="button-icon"
- size="lg"
+ class="fa-scale-110 fa-old-padding"
/>
</span>
<span
@@ -51,8 +48,7 @@
>
<FAIcon
icon="globe"
- class="button-icon"
- size="lg"
+ class="fa-scale-110 fa-old-padding"
/>
</span>
</div>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 442e91b2c9e25b6178e443f0a2f5576e10f67843..f1c3fd7a5bc44ca11437582ab510d66d2047a9e4 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -8,8 +8,7 @@
:title="$t('nav.search')"
><FAIcon
fixed-width
- size="lg"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="search"
@click.prevent.stop="toggleHidden"
/></a>
@@ -34,10 +33,9 @@
</button>
<span>
<FAIcon
- size="lg"
fixed-width
icon="times"
- class="cancel-icon"
+ class="cancel-icon fa-scale-110 fa-old-padding"
@click.prevent.stop="toggleHidden"
/>
</span>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 5a659fc84466257cb581b256a35aceb137866c4e..d62bc39253eb84c6073b75a89c4239d7a0da85ce 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -235,7 +235,7 @@
>
Error: {{ bannerUploadError }}
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearUploadError('banner')"
/>
@@ -286,7 +286,7 @@
Error: {{ backgroundUploadError }}
<FAIcon
size="lg"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearUploadError('background')"
/>
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 20201e18d5f3cb2ef1b93040e228d853c30bf962..3174fd7c49afa3bf7775d4309aac4ae46c8b06cc 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -42,25 +42,25 @@
<FAIcon
fixed-width
style="color: var(--cBlue)"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="reply"
/>
<FAIcon
fixed-width
style="color: var(--cGreen)"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="retweet"
/>
<FAIcon
fixed-width
style="color: var(--cOrange)"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="star"
/>
<FAIcon
fixed-width
style="color: var(--cRed)"
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="times"
/>
</div>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 2a4d794a183ee8ec57934a55aa4128a3b90b64e1..eac0ddb28a02213abe8fc028afc7b4943bf5cca8 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -37,9 +37,8 @@
>
<router-link :to="{ name: 'login' }">
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="sign-in-alt"
/> {{ $t("login.login") }}
</router-link>
@@ -50,9 +49,8 @@
>
<router-link :to="{ name: timelinesRoute }">
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="home"
/> {{ $t("nav.timelines") }}
</router-link>
@@ -66,9 +64,8 @@
style="position: relative"
>
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="comments"
/> {{ $t("nav.chats") }}
<span
@@ -84,9 +81,8 @@
<li @click="toggleDrawer">
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="bell"
/> {{ $t("nav.interactions") }}
</router-link>
@@ -97,9 +93,8 @@
>
<router-link to="/friend-requests">
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="user-plus"
/> {{ $t("nav.friend_requests") }}
<span
@@ -116,9 +111,8 @@
>
<router-link :to="{ name: 'chat' }">
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="bullhorn"
/> {{ $t("shoutbox.title") }}
</router-link>
@@ -131,9 +125,8 @@
>
<router-link :to="{ name: 'search' }">
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="search"
/> {{ $t("nav.search") }}
</router-link>
@@ -144,9 +137,8 @@
>
<router-link :to="{ name: 'who-to-follow' }">
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="user-plus"
/> {{ $t("nav.who_to_follow") }}
</router-link>
@@ -157,9 +149,8 @@
@click="openSettingsModal"
>
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="cog"
/> {{ $t("settings.settings") }}
</a>
@@ -167,9 +158,8 @@
<li @click="toggleDrawer">
<router-link :to="{ name: 'about'}">
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="info-circle"
/> {{ $t("nav.about") }}
</router-link>
@@ -183,9 +173,8 @@
target="_blank"
>
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="tachometer-alt"
/> {{ $t("nav.administration") }}
</a>
@@ -199,9 +188,8 @@
@click="doLogout"
>
<FAIcon
- size="lg"
fixed-width
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
/> {{ $t("login.logout") }}
</a>
@@ -284,7 +272,7 @@
--lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon);
- .button-icon:before {
+ .fa-scale-110 fa-old-padding:before {
width: 1.1em;
}
}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c94862d424579fe7bec9b22fe9e30a92be35de91..21412faa6d45bf8d53d7204511d1da86f02fa28d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -11,7 +11,7 @@
>
{{ error }}
<span
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
@click="clearError"
>
<FAIcon icon="times" />
@@ -22,7 +22,7 @@
<small class="status-username">
<FAIcon
v-if="muted && retweet"
- class="button-icon repeat-icon"
+ class="fa-scale-110 fa-old-padding repeat-icon"
icon="retweet"
/>
<router-link :to="userProfileLink">
@@ -49,13 +49,12 @@
</small>
<a
href="#"
- class="unmute button-icon"
+ class="unmute fa-scale-110 fa-old-padding"
@click.prevent="toggleMute"
>
<FAIcon
icon="eye-slash"
- class="button-icon"
- size="lg"
+ class="fa-scale-110 fa-old-padding"
/>
</a>
</div>
@@ -186,9 +185,8 @@
:title="status.visibility | capitalize"
>
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
:icon="visibilityIcon(status.visibility)"
- size="lg"
/>
</span>
<a
@@ -199,9 +197,8 @@
title="Source"
>
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="external-link-square-alt"
- size="lg"
/>
</a>
<a
@@ -211,9 +208,8 @@
@click.prevent="toggleExpanded"
>
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="plus-square"
- size="lg"
/>
</a>
<a
@@ -223,8 +219,7 @@
>
<FAIcon
icon="eye-slash"
- class="button-icon"
- size="lg"
+ class="fa-scale-110 fa-old-padding"
/>
</a>
</span>
@@ -249,9 +244,8 @@
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="reply"
- size="lg"
flip="horizontal"
/>
<span
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 8099ddd55d1ab893def88176fc054b344a35c909..c46531be47759370cb73bbac01918a436d78597b 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -18,8 +18,7 @@
<router-link :to="{ name: 'friends' }">
<FAIcon
fixed-width
- size="lg"
- class="button-icon "
+ class="fa-scale-110 fa-old-padding "
icon="home"
/>{{ $t("nav.timeline") }}
</router-link>
@@ -28,8 +27,7 @@
<router-link :to="{ name: 'bookmarks'}">
<FAIcon
fixed-width
- size="lg"
- class="button-icon "
+ class="fa-scale-110 fa-old-padding "
icon="bookmark"
/>{{ $t("nav.bookmarks") }}
</router-link>
@@ -38,8 +36,7 @@
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
<FAIcon
fixed-width
- size="lg"
- class="button-icon "
+ class="fa-scale-110 fa-old-padding "
icon="envelope"
/>{{ $t("nav.dms") }}
</router-link>
@@ -48,8 +45,7 @@
<router-link :to="{ name: 'public-timeline' }">
<FAIcon
fixed-width
- size="lg"
- class="button-icon "
+ class="fa-scale-110 fa-old-padding "
icon="users"
/>{{ $t("nav.public_tl") }}
</router-link>
@@ -58,8 +54,7 @@
<router-link :to="{ name: 'public-external-timeline' }">
<FAIcon
fixed-width
- size="lg"
- class="button-icon "
+ class="fa-scale-110 fa-old-padding "
icon="globe"
/>{{ $t("nav.twkn") }}
</router-link>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index c5f10b75f973f79046f571658ccfff99fc9fb0d8..55e231d2990e2c98aa6df053946fe158aa6de08f 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -22,9 +22,8 @@
/>
<div class="user-info-avatar-link-overlay">
<FAIcon
- class="button-icon"
+ class="fa-scale-110 fa-old-padding"
icon="search-plus"
- size="lg"
/>
</div>
</a>