diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 34e723d0fbcb90a6e6a3fa8098118ece4332ec3b..1630ba802e7296596dfe0205c88a346f04ff95f9 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -7,6 +7,14 @@ import ChatTitle from '../chat_title/chat_title.vue'
import chatService from '../../services/chat_service/chat_service.js'
import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faChevronDown
+)
const BOTTOMED_OUT_OFFSET = 10
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 2e4538c84c1af193468456d7e434729d0092d095..0d44c920651cb56dd910069bb92ec5a1c6bd9960 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -58,14 +58,15 @@
:class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })"
>
- <i class="icon-down-open">
+ <span>
+ <FAIcon icon="chevron-down" />
<div
v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
- </i>
+ </span>
</div>
<PostStatusForm
:disable-subject="true"
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 9dc871b6bf7d0df8e120dc8b92b234b9469b3065..374cb9ba2212af281ff41aaf24a0ddcdffc602be 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -8,13 +8,13 @@
class="rating"
>
<span v-if="contrast.aaa">
- <i class="icon-thumbs-up-alt" />
+ <FAIcon icon="thumbs-up" />
</span>
<span v-if="!contrast.aaa && contrast.aa">
- <i class="icon-adjust" />
+ <FAIcon icon="adjust" />
</span>
<span v-if="!contrast.aaa && !contrast.aa">
- <i class="icon-attention" />
+ <FAIcon icon="exclamation-triangle" />
</span>
</span>
<span
@@ -23,19 +23,32 @@
:title="hint_18pt"
>
<span v-if="contrast.laaa">
- <i class="icon-thumbs-up-alt" />
+ <FAIcon icon="thumbs-up" />
</span>
<span v-if="!contrast.laaa && contrast.laa">
- <i class="icon-adjust" />
+ <FAIcon icon="adjust" />
</span>
<span v-if="!contrast.laaa && !contrast.laa">
- <i class="icon-attention" />
+ <FAIcon icon="exclamation-triangle" />
</span>
</span>
</span>
</template>
<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faAdjust,
+ faExclamationTriangle,
+ faThumbsUp
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faAdjust,
+ faExclamationTriangle,
+ faThumbsUp
+)
+
export default {
props: {
large: {
@@ -85,6 +98,7 @@ export default {
.rating {
display: inline-block;
text-align: center;
+ margin-left: 0.5em;
}
}
</style>
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 8e2b0e45f6cd130e5129cb41a88cd3f392607e19..6274780b866cb808afc76d86400627b7c35189e8 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,4 +1,12 @@
import { set } from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faChevronDown
+)
export default {
props: [
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 61f0384b0881347edbd0549cd4a8d3a69a5df916..40aed190e9b855b4a95c3d074cf30d2ddf2992d2 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,7 @@
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon class="icon-down-open" icon="chevron-down" />
</label>
<input
v-if="isCustom"
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index dd6800a3029f5aac761c4499bad03ac462bef2fe..2a3d4cbb861a0292a6189074f242ba6c94701820 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,7 @@
{{ languageNames[i] }}
</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon class="icon-down-open" icon="chevron-down" />
</label>
</div>
</template>
@@ -28,6 +28,14 @@
import languagesObject from '../../i18n/messages'
import ISO6391 from 'iso-639-1'
import _ from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faChevronDown
+)
export default {
computed: {
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 3b2df556047f3b0736b1ece86e736e3762287498..5f38a5ae718c1a52dc2713060974e7dd145e0ad6 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -2,6 +2,14 @@ import { filter, trim } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faChevronDown
+)
const FilteringTab = {
data () {
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index eea41514dd18cd6b45917eabf94ba94679d49ec7..786f3618da903d590a63cea27bb73d0cdceb2453 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,7 @@
<option value="following">{{ $t('settings.reply_visibility_following') }}</option>
<option value="self">{{ $t('settings.reply_visibility_self') }}</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon class="icon-down-open" icon="chevron-down" />
</label>
</div>
<div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 0eb37e44eb1e6550b42e15588bae2bcf9980c717..a39d70716f092a7abdc3d426e271b9b7bb307df5 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -2,6 +2,14 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faChevronDown
+)
const GeneralTab = {
data () {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 13482de701946d4b04d6f239e389ec792108c654..9fc1470e8db3961d6a34a78e682b45b699c7f1d6 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,7 @@
{{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon class="icon-down-open" icon="chevron-down" />
</label>
</div>
</li>
@@ -127,7 +127,7 @@
{{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon class="icon-down-open" icon="chevron-down" />
</label>
</div>
</li>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index e3c5e80a2000ff6fba1c0f55df8300e61cd182c0..6cf75fe7102414f1067ca8f6a592e91a3fbf1c12 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -35,6 +35,14 @@ import ExportImport from 'src/components/export_import/export_import.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import Preview from './preview.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faChevronDown
+)
// List of color values used in v1
const v1OnlyNames = [
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 5328c3508849ec3da1dad4d16a471d2eb665aa32..fb8b16ae7b49cc1e7c28eb8c1f0586f225ebf88d 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,7 @@
{{ style[0] || style.name }}
</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon class="icon-down-open" icon="chevron-down" />
</label>
</div>
</template>
@@ -907,7 +907,7 @@
{{ $t('settings.style.shadows.components.' + shadow) }}
</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon class="icon-down-open" icon="chevron-down" />
</label>
</div>
<div class="override">
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index f9e7b985cece534b6d1e6df33da1dc9576c474bf..800c39d51b37588283ae4b1b2d4eb6f4b3587a68 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -2,6 +2,20 @@ import ColorInput from '../color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue'
import { getCssShadow } from '../../services/style_setter/style_setter.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faTimes,
+ faChevronDown,
+ faChevronUp,
+ faPlus
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faChevronDown,
+ faChevronUp,
+ faTimes,
+ faPlus
+)
const toModel = (object = {}) => ({
x: 0,
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 815a9e595f516ea764457746e28010514c94a7b3..1f63f3f29e119c1408fca4879b4cbb99cc89351d 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,35 +78,35 @@
{{ $t('settings.style.shadows.shadow_id', { value: index }) }}
</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon icon="chevron-down" class="icon-down-open" />
</label>
<button
class="btn btn-default"
:disabled="!ready || !present"
@click="del"
>
- <i class="icon-cancel" />
+ <FAIcon fixed-width icon="times" />
</button>
<button
class="btn btn-default"
:disabled="!moveUpValid"
@click="moveUp"
>
- <i class="icon-up-open" />
+ <FAIcon fixed-width icon="chevron-up" />
</button>
<button
class="btn btn-default"
:disabled="!moveDnValid"
@click="moveDn"
>
- <i class="icon-down-open" />
+ <FAIcon fixed-width icon="chevron-down" />
</button>
<button
class="btn btn-default"
:disabled="usingFallback"
@click="add"
>
- <i class="icon-plus" />
+ <FAIcon fixed-width icon="plus" />
</button>
</div>
<div