diff --git a/app/helpers.php b/app/helpers.php
index 093c6f5f..aef2f619 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -213,14 +213,14 @@ if (! function_exists('bs_menu')) {
             $content .= "<li{$attr}>";
 
             if (isset($value['children'])) {
-                $content .= sprintf('<a href="#"><i class="fa %s"></i> <span>%s</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>', $value['icon'], trans($value['title']));
+                $content .= sprintf('<a href="#"><i class="fas %s"></i> &nbsp;<span>%s</span><span class="pull-right-container"><i class="fas fa-angle-left pull-right"></i></span></a>', $value['icon'], trans($value['title']));
 
                 // recurse
                 $content .= '<ul class="treeview-menu">'.bs_menu_render($value['children']).'</ul>';
             } else {
                 if ($value) {
                     $content .= sprintf(
-                        '<a href="%s"><i class="fa %s"></i> <span>%s</span></a>',
+                        '<a href="%s"><i class="fas %s"></i> &nbsp;<span>%s</span></a>',
                         url((string) $value['link']),
                         (string) $value['icon'],
                         trans((string) $value['title'])
diff --git a/config/menu.php b/config/menu.php
index 94646bd7..a101d263 100644
--- a/config/menu.php
+++ b/config/menu.php
@@ -9,14 +9,14 @@
 */
 
 $menu['user'] = [
-    ['title' => 'general.dashboard',      'link' => 'user',         'icon' => 'fa-dashboard'],
+    ['title' => 'general.dashboard',      'link' => 'user',         'icon' => 'fa-tachometer-alt'],
     ['title' => 'general.my-closet',      'link' => 'user/closet',  'icon' => 'fa-star'],
     ['title' => 'general.player-manage',  'link' => 'user/player',  'icon' => 'fa-users'],
     ['title' => 'general.profile',        'link' => 'user/profile', 'icon' => 'fa-user'],
 ];
 
 $menu['admin'] = [
-    ['title' => 'general.dashboard',      'link' => 'admin',                'icon' => 'fa-dashboard'],
+    ['title' => 'general.dashboard',      'link' => 'admin',                'icon' => 'fa-tachometer-alt'],
     ['title' => 'general.user-manage',    'link' => 'admin/users',          'icon' => 'fa-users'],
     ['title' => 'general.player-manage',  'link' => 'admin/players',        'icon' => 'fa-gamepad'],
     ['title' => 'general.customize',      'link' => 'admin/customize',      'icon' => 'fa-paint-brush'],
diff --git a/package.json b/package.json
index 8ff08132..f1f1103f 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.55",
+    "@fortawesome/fontawesome-free": "^5.2.0",
     "admin-lte": "^2.4.2",
     "bootstrap": "^3.3.7",
     "bootstrap-fileinput": "^4.4.7",
     "chart.js": "^2.7.1",
     "es6-promise": "^4.2.4",
-    "font-awesome": "^4.7.0",
     "highlight.js": "^9.12.0",
     "icheck": "^1.0.2",
     "jquery": "^3.3.1",
diff --git a/resources/assets/src/components/common/Previewer.vue b/resources/assets/src/components/common/Previewer.vue
index 24c7454c..24aabe04 100644
--- a/resources/assets/src/components/common/Previewer.vue
+++ b/resources/assets/src/components/common/Previewer.vue
@@ -9,21 +9,21 @@
                         data-toggle="tooltip"
                         data-placement="bottom"
                         :title="$t('general.walk') + ' / ' + $t('general.run')"
-                        class="fa fa-forward"
+                        class="fas fa-forward"
                     ></i>
                     <i
                         @click="toggleRotate"
                         data-toggle="tooltip"
                         data-placement="bottom"
                         :title="$t('general.rotation')"
-                        class="fa fa-repeat"
+                        class="fas fa-redo-alt"
                     ></i>
                     <i
                         @click="togglePause"
                         data-toggle="tooltip"
                         data-placement="bottom"
                         :title="$t('general.pause')"
-                        class="fa"
+                        class="fas"
                         :class="{ 'fa-pause': !paused, 'fa-play': paused }"
                     ></i>
                     <i
@@ -31,7 +31,7 @@
                         data-toggle="tooltip"
                         data-placement="bottom"
                         :title="$t('general.reset')"
-                        class="fa fa-stop"
+                        class="fas fa-stop"
                     ></i>
                 </div>
             </h3>
diff --git a/resources/assets/src/components/user/ClosetItem.vue b/resources/assets/src/components/user/ClosetItem.vue
index 2f7bf2cb..a4929a1b 100644
--- a/resources/assets/src/components/user/ClosetItem.vue
+++ b/resources/assets/src/components/user/ClosetItem.vue
@@ -14,14 +14,14 @@
                 class="more"
                 data-toggle="tooltip"
                 data-placement="bottom"
-            ><i class="fa fa-share"></i></a>
+            ><i class="fas fa-share-alt"></i></a>
             <span
                 :title="$t('general.more')"
                 class="more"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 id="more-button"
-            ><i class="fa fa-cog"></i></span>
+            ><i class="fas fa-cog"></i></span>
 
             <ul class="dropup dropdown-menu" aria-labelledby="more-button">
                 <li><a @click="rename" v-t="'user.renameItem'"></a></li>
diff --git a/resources/assets/src/components/user/Dashboard.vue b/resources/assets/src/components/user/Dashboard.vue
index 7168ea8c..02f560db 100644
--- a/resources/assets/src/components/user/Dashboard.vue
+++ b/resources/assets/src/components/user/Dashboard.vue
@@ -42,7 +42,7 @@
         </div><!-- ./box-body -->
         <div class="box-footer">
             <button v-if="canSign" class="btn btn-primary pull-left" @click="sign">
-                <i class="fa fa-calendar-check-o" aria-hidden="true"></i> &nbsp;{{ $t('user.sign') }}
+                <i class="far fa-calendar-check" aria-hidden="true"></i> &nbsp;{{ $t('user.sign') }}
             </button>
             <button
                 v-else
@@ -50,7 +50,7 @@
                 :title="$t('user.last-sign', { time: lastSignAt.toLocaleString() })"
                 disabled
             >
-                <i class="fa fa-calendar-check-o" aria-hidden="true"></i> &nbsp;
+                <i class="far fa-calendar-check" aria-hidden="true"></i> &nbsp;
                 {{ remainingTimeText }}
             </button>
         </div><!-- /.box-footer -->
diff --git a/resources/assets/src/stylus/common.styl b/resources/assets/src/stylus/common.styl
index ebbbc91f..4ede7b48 100644
--- a/resources/assets/src/stylus/common.styl
+++ b/resources/assets/src/stylus/common.styl
@@ -20,6 +20,11 @@ body, h1, h2, h3, h4, h5, h6 {
     font-family: Minecraft;
 }
 
+// AdminLTE 2 is not compatible with Font Awesome 5
+.main-header .sidebar-toggle::before {
+    content: '';
+}
+
 #toast-container > div {
     opacity: 1;
     filter: "alpha(opacity=100)";
diff --git a/resources/assets/tests/components/common/Previewer.test.js b/resources/assets/tests/components/common/Previewer.test.js
index 2411776f..c56febff 100644
--- a/resources/assets/tests/components/common/Previewer.test.js
+++ b/resources/assets/tests/components/common/Previewer.test.js
@@ -76,7 +76,7 @@ test('toggle run', () => {
 
 test('toggle rotate', () => {
     const wrapper = mount(Previewer);
-    wrapper.find('.fa-repeat').trigger('click');
+    wrapper.find('.fa-redo-alt').trigger('click');
     expect(wrapper.vm.handles.rotate.paused).toBeTrue();
 });
 
diff --git a/resources/lang/en/front-end.yml b/resources/lang/en/front-end.yml
index 73e0a7c5..83168047 100644
--- a/resources/lang/en/front-end.yml
+++ b/resources/lang/en/front-end.yml
@@ -96,7 +96,7 @@ user:
   profile:
     avatar:
       title: Change Avatar?
-      notice: Click the gear icon「<i class="fa fa-cog"></i>」of any skin in your skinlib, then click 「Set as avatar」. We will cut the head segment of that skin for you. If there is no icon like this, please unable the extensions like ADBlock.
+      notice: Click the gear icon「<i class="fas fa-cog"></i>」of any skin in your skinlib, then click 「Set as avatar」. We will cut the head segment of that skin for you. If there is no icon like this, please unable the extensions like ADBlock.
 
     password:
       title: Change Password
diff --git a/resources/lang/en/user.yml b/resources/lang/en/user.yml
index f2528383..c7723baa 100644
--- a/resources/lang/en/user.yml
+++ b/resources/lang/en/user.yml
@@ -115,7 +115,7 @@ player:
 profile:
   avatar:
     title: Change Avatar?
-    notice: Click the gear icon「<i class="fa fa-cog"></i>」of any skin in your skinlib, then click 「Set as avatar」. We will cut the head segment of that skin for you. If there is no icon like this, please unable the extensions like ADBlock.
+    notice: Click the gear icon「<i class="fas fa-cog"></i>」of any skin in your skinlib, then click 「Set as avatar」. We will cut the head segment of that skin for you. If there is no icon like this, please unable the extensions like ADBlock.
     wrong-type: You can't set a cape as avatar
     success: Avatar setted successfully
 
diff --git a/resources/lang/zh_CN/front-end.yml b/resources/lang/zh_CN/front-end.yml
index 5459cd68..cfb71693 100644
--- a/resources/lang/zh_CN/front-end.yml
+++ b/resources/lang/zh_CN/front-end.yml
@@ -96,7 +96,7 @@ user:
   profile:
     avatar:
       title: 更改头像？
-      notice: 请在衣柜中任意皮肤的右下角「<i class="fa fa-cog"></i>」处选择「设为头像」，将会自动截取该皮肤的头部作为头像哦~ 如果看不到这个图标，请关闭 ADBlock，ABP 之类的广告过滤扩展。
+      notice: 请在衣柜中任意皮肤的右下角「<i class="fas fa-cog"></i>」处选择「设为头像」，将会自动截取该皮肤的头部作为头像哦~ 如果看不到这个图标，请关闭 ADBlock，ABP 之类的广告过滤扩展。
 
     password:
       title: 更改密码
diff --git a/resources/lang/zh_CN/user.yml b/resources/lang/zh_CN/user.yml
index 1f96b2e7..0281e36e 100644
--- a/resources/lang/zh_CN/user.yml
+++ b/resources/lang/zh_CN/user.yml
@@ -112,7 +112,7 @@ player:
 profile:
   avatar:
     title: 更改头像？
-    notice: 请在衣柜中任意皮肤的右下角「<i class="fa fa-cog"></i>」处选择「设为头像」，将会自动截取该皮肤的头部作为头像哦~ 如果看不到这个图标，请关闭 ADBlock，ABP 之类的广告过滤扩展。
+    notice: 请在衣柜中任意皮肤的右下角「<i class="fas fa-cog"></i>」处选择「设为头像」，将会自动截取该皮肤的头部作为头像哦~ 如果看不到这个图标，请关闭 ADBlock，ABP 之类的广告过滤扩展。
     wrong-type: 披风可不能设置为头像哦~
     success: 设置成功！
 
diff --git a/resources/views/admin/customize.tpl b/resources/views/admin/customize.tpl
index d4f218cf..30c194ad 100644
--- a/resources/views/admin/customize.tpl
+++ b/resources/views/admin/customize.tpl
@@ -33,7 +33,7 @@
                                     @foreach([$color, "$color-light"] as $innerColor)
                                     <tr>
                                         <td>@lang("admin.customize.colors.$innerColor")</td>
-                                        <td><a href="#" data-skin="skin-{{ $innerColor }}" class="btn bg-{{ $color }} btn-xs"><i class="fa fa-eye"></i></a></td>
+                                        <td><a href="#" data-skin="skin-{{ $innerColor }}" class="btn bg-{{ $color }} btn-xs"><i class="far fa-eye"></i></a></td>
                                     </tr>
                                     @endforeach
                                 @endforeach
diff --git a/resources/views/admin/index.tpl b/resources/views/admin/index.tpl
index c8c773a4..51463bc2 100644
--- a/resources/views/admin/index.tpl
+++ b/resources/views/admin/index.tpl
@@ -22,7 +22,7 @@
                     <div class="col-md-6">
                         <div class="info-box">
                             <a href="{{ url('admin/users') }}">
-                                <span class="info-box-icon bg-aqua"><i class="fa fa-users"></i></span>
+                                <span class="info-box-icon bg-aqua"><i class="fas fa-users"></i></span>
                                 <div class="info-box-content">
                                     <span class="info-box-text">@lang('admin.index.total-users')</span>
                                     <span class="info-box-number">{{ App\Models\User::count() }}</span>
@@ -34,7 +34,7 @@
                     <div class="col-md-6">
                         <div class="info-box">
                             <a href="{{ url('admin/players') }}">
-                                <span class="info-box-icon bg-green"><i class="fa fa-gamepad"></i></span>
+                                <span class="info-box-icon bg-green"><i class="fas fa-gamepad"></i></span>
                                 <div class="info-box-content">
                                     <span class="info-box-text">@lang('admin.index.total-players')</span>
                                     <span class="info-box-number">{{ App\Models\Player::count() }}</span>
@@ -45,7 +45,7 @@
                 </div>
 
                 <div class="info-box">
-                    <span class="info-box-icon bg-aqua" style="background-color: #605ca8 !important;"><i class="fa fa-files-o"></i></span>
+                    <span class="info-box-icon bg-aqua" style="background-color: #605ca8 !important;"><i class="far fa-file"></i></span>
                     <div class="info-box-content">
                         <span class="info-box-text">@lang('admin.index.total-textures')</span>
                         <span class="info-box-number">{{ App\Models\Texture::count() }}</span>
@@ -53,10 +53,12 @@
                 </div><!-- /.info-box -->
 
                 <div class="info-box">
-                    <span class="info-box-icon bg-yellow"><i class="fa fa-hdd-o"></i></span>
+                    <span class="info-box-icon bg-yellow"><i class="far fa-hdd"></i></span>
                     <div class="info-box-content">
                         <span class="info-box-text">@lang('admin.index.disk-usage')</span>
-                        <?php $size = DB::table('textures')->sum('size') ?: 0; ?>
+                        @php
+                            $size = DB::table('textures')->sum('size') ?: 0;
+                        @endphp
                         <span class="info-box-number">{{ $size > 1024 ? round($size / 1024, 1)."MB" : $size."KB" }}</span>
                     </div><!-- /.info-box-content -->
                 </div><!-- /.info-box -->
@@ -66,8 +68,8 @@
                     <div class="box-header with-border">
                         <h3 class="box-title">@lang('admin.index.overview')</h3>
                         <div class="box-tools pull-right">
-                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
+                            <button class="btn btn-box-tool" data-widget="remove"><i class="fas fa-times"></i></button>
                         </div>
                     </div>
                     <div class="box-body">
diff --git a/resources/views/admin/master.tpl b/resources/views/admin/master.tpl
index 173747c7..f8e6e421 100644
--- a/resources/views/admin/master.tpl
+++ b/resources/views/admin/master.tpl
@@ -26,7 +26,7 @@
             <!-- Logo -->
             <a href="{{ option('site_url') }}" class="logo">
                 <!-- mini logo for sidebar mini 50x50 pixels -->
-                <span class="logo-mini"> <i class="fa fa-bookmark"></i> </span>
+                <span class="logo-mini"> <i class="fas fa-bookmark"></i> </span>
                 <!-- logo for regular state and mobile devices -->
                 <span class="logo-lg">{{ option_localized('site_name') }}</span>
             </a>
@@ -35,6 +35,7 @@
             <nav class="navbar navbar-static-top" role="navigation">
                 <!-- Sidebar toggle button-->
                 <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
+                    <i class="fas fa-bars"></i>
                     <span class="sr-only">Toggle navigation</span>
                 </a>
                 <!-- Navbar Right Menu -->
@@ -60,7 +61,7 @@
                     </div>
                     <div class="pull-left info">
                         <p class="nickname">{{ bs_nickname($user) }}</p>
-                        <i class="fa fa-circle text-success"></i> {{ bs_role($user) }}
+                        <i class="fas fa-circle text-success"></i> {{ bs_role($user) }}
                     </div>
                 </div>
 
@@ -70,7 +71,7 @@
                     {!! bs_menu('admin') !!}
 
                     <li class="header">@lang('general.back')</li>
-                    <li><a href="{{ url('user') }}"><i class="fa fa-user"></i> <span>@lang('general.user-center')</span></a></li>
+                    <li><a href="{{ url('user') }}"><i class="fas fa-user"></i> &nbsp;<span>@lang('general.user-center')</span></a></li>
                 </ul><!-- /.sidebar-menu -->
             </section>
             <!-- /.sidebar -->
diff --git a/resources/views/common/language.tpl b/resources/views/common/language.tpl
index 594a67b7..96a93e34 100644
--- a/resources/views/common/language.tpl
+++ b/resources/views/common/language.tpl
@@ -1,7 +1,7 @@
 <!-- Language Menu -->
 <li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-        <i class="fa fa-language" aria-hidden="true"></i>
+        <i class="fas fa-language" aria-hidden="true"></i>
         <span class="description-text">{{ config('locales.'.App::getLocale(), config('locales.'.config('app.fallback_locale')))['short_name'] }}</span>
         <span class="caret"></span>
     </a>
diff --git a/resources/views/common/option-form/hint.tpl b/resources/views/common/option-form/hint.tpl
index 0ff95827..85ca54a7 100644
--- a/resources/views/common/option-form/hint.tpl
+++ b/resources/views/common/option-form/hint.tpl
@@ -1 +1 @@
-<i class="fa fa-question-circle" title="{!! $hint !!}" data-toggle="tooltip" data-placement="top"></i>
+<i class="fas fa-question-circle" title="{!! $hint !!}" data-toggle="tooltip" data-placement="top"></i>
diff --git a/resources/views/common/user-menu.tpl b/resources/views/common/user-menu.tpl
index 89acc6d0..64fc60c3 100644
--- a/resources/views/common/user-menu.tpl
+++ b/resources/views/common/user-menu.tpl
@@ -6,7 +6,7 @@
         <!-- The user image in the navbar-->
         <img src="{{ avatar($user, 25) }}" class="user-image" alt="User Image">
         @else
-        <i class="fa fa-user"></i>
+        <i class="fas fa-user"></i>
         @endif
 
         <!-- hidden-xs hides the username on small devices so only the image appears. -->
diff --git a/resources/views/index.tpl b/resources/views/index.tpl
index 00ec9b78..f3b1de2e 100644
--- a/resources/views/index.tpl
+++ b/resources/views/index.tpl
@@ -21,7 +21,7 @@
                     <div class="navbar-header">
                         <a href="{{ option('site_url') }}" class="navbar-brand">{{ option_localized('site_name') }}</a>
                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
-                            <i class="fa fa-bars"></i>
+                            <i class="fas fa-bars"></i>
                         </button>
                     </div>
 
@@ -80,17 +80,17 @@
                 <br>
                 <br>
                 <div class="col-lg-4">
-                    <i class="fa fa-users" aria-hidden="true"></i>
+                    <i class="fas fa-users"></i>
                     <h3>@lang('index.features.multi-player.name')</h3>
                     <p>@lang('index.features.multi-player.desc')</p>
                 </div>
                 <div class="col-lg-4">
-                    <i class="fa fa-share-alt" aria-hidden="true"></i>
+                    <i class="fas fa-share-alt"></i>
                     <h3>@lang('index.features.sharing.name')</h3>
                     <p>@lang('index.features.sharing.desc')</p>
                 </div>
                 <div class="col-lg-4">
-                    <i class="fa fa-cloud" aria-hidden="true"></i>
+                    <i class="fas fa-cloud"></i>
                     <h3>@lang('index.features.free.name')</h3>
                     <p>@lang('index.features.free.desc')</p>
                 </div>
diff --git a/resources/views/skinlib/index.tpl b/resources/views/skinlib/index.tpl
index 1d69a71b..d83073cd 100644
--- a/resources/views/skinlib/index.tpl
+++ b/resources/views/skinlib/index.tpl
@@ -12,7 +12,7 @@
                 <small id="search-indicator"></small>
             </h1>
             <ol class="breadcrumb">
-                <li><i class="fa fa-tags"></i> @lang('skinlib.filter.now-showing')</li>
+                <li><i class="fas fa-tags"></i> @lang('skinlib.filter.now-showing')</li>
                 <li id="filter-indicator"></li>
                 <li id="uploader-indicator"></li>
                 <li class="active" id="sort-indicator"></li>
@@ -33,7 +33,7 @@
                 </div>
 
                 <div class="overlay">
-                    <i class="fa fa-refresh fa-spin"></i>
+                    <i class="fas fa-sync-alt fa-spin"></i>
                     <span>@lang('general.loading')</span>
                 </div>
             </div><!-- /.box -->
diff --git a/resources/views/skinlib/master.tpl b/resources/views/skinlib/master.tpl
index d0b72321..635173f9 100644
--- a/resources/views/skinlib/master.tpl
+++ b/resources/views/skinlib/master.tpl
@@ -24,7 +24,7 @@
                             {{ option_localized('site_name') }}
                         </a>
                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
-                            <i class="fa fa-bars"></i>
+                            <i class="fas fa-bars"></i>
                         </button>
                     </div>
 
@@ -42,7 +42,7 @@
                             <!-- Filters -->
                             <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                    <i class="fa fa-filter" aria-hidden="true"></i> @lang('skinlib.general.filter') <span class="caret"></span>
+                                    <i class="fas fa-filter" aria-hidden="true"></i> @lang('skinlib.general.filter') <span class="caret"></span>
                                 </a>
                                 <ul class="dropdown-menu" role="menu">
                                     <li><a class="filter" data-filter="skin" href="#">@lang('general.skin') <small>@lang('skinlib.filter.any-model')</small></a></li>
@@ -68,7 +68,7 @@
                             <!-- Sort -->
                             <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                    <i class="fa fa-sort-amount-desc" aria-hidden="true"></i> @lang('skinlib.general.sort') <span class="caret"></span>
+                                    <i class="fas fa-sort-amount-down" aria-hidden="true"></i> @lang('skinlib.general.sort') <span class="caret"></span>
                                 </a>
                                 <ul class="dropdown-menu" role="menu">
                                     <li><a class="sort" data-sort="likes" href="#">@lang('skinlib.sort.most-likes')</a></li>
@@ -90,7 +90,7 @@
                     <!-- Navbar Right Menu -->
                     <div class="navbar-custom-menu">
                         <ul class="nav navbar-nav">
-                            <li><a href="{{ url('skinlib/upload') }}"><i class="fa fa-upload" aria-hidden="true"></i> <span class="description-text">@lang('skinlib.general.upload-new-skin')</span></a></li>
+                            <li><a href="{{ url('skinlib/upload') }}"><i class="fas fa--fileupload" aria-hidden="true"></i> <span class="description-text">@lang('skinlib.general.upload-new-skin')</span></a></li>
 
                             @include('common.language')
 
@@ -101,7 +101,7 @@
                             <li class="dropdown user user-menu">
                                 <!-- Menu Toggle Button -->
                                 <a href="{{ url('auth/login') }}">
-                                    <i class="fa fa-user"></i>
+                                    <i class="fas fa-user"></i>
                                     <!-- hidden-xs hides the username on small devices so only the image appears. -->
                                     <span class="hidden-xs nickname">@lang('general.anonymous')</span>
                                 </a>
diff --git a/resources/views/skinlib/show.tpl b/resources/views/skinlib/show.tpl
index 7f4c6c7f..d4675b4b 100644
--- a/resources/views/skinlib/show.tpl
+++ b/resources/views/skinlib/show.tpl
@@ -32,7 +32,7 @@
                                 @endif
 
                             @endif
-                            <div class="btn likes" title="@lang('skinlib.show.likes')" data-toggle="tooltip" data-placement="top"><i class="fa fa-heart"></i>
+                            <div class="btn likes" title="@lang('skinlib.show.likes')" data-toggle="tooltip" data-placement="top"><i class="fas fa-heart"></i>
                                 <span id="likes">{{ $texture->likes }}</span>
                             </div>
                         </div><!-- /.box-footer -->
@@ -69,7 +69,7 @@
                                     <tr>
                                         <td>Hash
                                             @if (option('allow_downloading_texture'))
-                                            <i class="fa fa-question-circle" title="@lang('skinlib.show.download-raw')" data-toggle="tooltip" data-placement="top"></i>
+                                            <i class="fas fa-question-circle" title="@lang('skinlib.show.download-raw')" data-toggle="tooltip" data-placement="top"></i>
                                             @endif
                                         </td>
                                         <td>
diff --git a/resources/views/user/closet.tpl b/resources/views/user/closet.tpl
index dcdc6c94..9b734281 100644
--- a/resources/views/user/closet.tpl
+++ b/resources/views/user/closet.tpl
@@ -12,8 +12,8 @@
             @lang('general.my-closet')
         </h1>
         <div class="breadcrumb">
-            <a href="{{ url('skinlib/upload') }}"><i class="fa fa-upload"></i> @lang('user.closet.upload')</a>
-            <a href="{{ url('skinlib') }}"><i class="fa fa-search"></i> @lang('user.closet.search')</a>
+            <a href="{{ url('skinlib/upload') }}"><i class="fas fa-file-upload"></i> @lang('user.closet.upload')</a>
+            <a href="{{ url('skinlib') }}"><i class="fas fa-search"></i> @lang('user.closet.search')</a>
         </div>
     </section>
 
diff --git a/resources/views/user/master.tpl b/resources/views/user/master.tpl
index 52c58d12..f2c73644 100644
--- a/resources/views/user/master.tpl
+++ b/resources/views/user/master.tpl
@@ -22,7 +22,7 @@
             <!-- Logo -->
             <a href="{{ option('site_url') }}" class="logo">
                 <!-- mini logo for sidebar mini 50x50 pixels -->
-                <span class="logo-mini"> <i class="fa fa-bookmark"></i> </span>
+                <span class="logo-mini"> <i class="fas fa-bookmark"></i> </span>
                 <!-- logo for regular state and mobile devices -->
                 <span class="logo-lg">{{ option_localized('site_name') }}</span>
             </a>
@@ -31,6 +31,7 @@
             <nav class="navbar navbar-static-top" role="navigation">
                 <!-- Sidebar toggle button-->
                 <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
+                    <i class="fas fa-bars"></i>
                     <span class="sr-only">Toggle navigation</span>
                 </a>
                 <!-- Navbar Right Menu -->
@@ -56,7 +57,7 @@
                     </div>
                     <div class="pull-left info">
                         <p class="nickname">{{ bs_nickname($user) }}</p>
-                        <i class="fa fa-circle text-success"></i> {{ bs_role($user) }}
+                        <i class="fas fa-circle text-success"></i> {{ bs_role($user) }}
                     </div>
                 </div>
 
@@ -66,11 +67,11 @@
                     {!! bs_menu('user') !!}
 
                     <li class="header">@lang('general.explore')</li>
-                    <li><a href="{{ url('skinlib') }}"><i class="fa fa-archive"></i> <span>@lang('general.skinlib')</span></a></li>
+                    <li><a href="{{ url('skinlib') }}"><i class="fas fa-archive"></i> &nbsp;<span>@lang('general.skinlib')</span></a></li>
 
                     @admin($user)
                     <li class="header">@lang('general.manage')</li>
-                    <li><a href="{{ url('admin') }}"><i class="fa fa-cog"></i> <span>@lang('general.admin-panel')</span></a></li>
+                    <li><a href="{{ url('admin') }}"><i class="fas fa-cog"></i> &nbsp;<span>@lang('general.admin-panel')</span></a></li>
                     @endadmin
                 </ul><!-- /.sidebar-menu -->
             </section>
diff --git a/resources/views/user/player.tpl b/resources/views/user/player.tpl
index 92e1b927..3e4cdae5 100644
--- a/resources/views/user/player.tpl
+++ b/resources/views/user/player.tpl
@@ -26,7 +26,7 @@
                                     <th>@lang('user.player.player-name')</th>
                                     <th>
                                       @lang('user.player.preference.title')
-                                      <i class="fa fa-question-circle" title="@lang('user.player.preference.description')" data-toggle="tooltip" data-placement="right"></i>
+                                      <i class="fas fa-question-circle" title="@lang('user.player.preference.description')" data-toggle="tooltip" data-placement="right"></i>
                                     </th>
                                     <th>@lang('user.player.edit')</th>
                                     <th>@lang('user.player.operation')</th>
@@ -58,7 +58,7 @@
                     </div>
                     <div class="box-footer clearfix">
                         <button class="btn btn-primary pull-left" data-toggle="modal" data-target="#modal-add-player">
-                            <i class="fa fa-plus" aria-hidden="true"></i> &nbsp;@lang('user.player.add-player')
+                            <i class="fas fa-plus" aria-hidden="true"></i> &nbsp;@lang('user.player.add-player')
                         </button>
                     </div>
                 </div>
@@ -67,7 +67,7 @@
                     <div class="box-header with-border">
                         <h3 class="box-title">@lang('general.notice')</h3>
                         <div class="box-tools pull-right">
-                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
+                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fas fa-plus"></i></button>
                         </div><!-- /.box-tools -->
                     </div><!-- /.box-header -->
                     <div class="box-body">
diff --git a/webpack.config.js b/webpack.config.js
index 4502e0ce..e7081bbf 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,7 +15,9 @@ module.exports = [{
             'bootstrap/dist/css/bootstrap.min.css',
             'admin-lte/dist/css/AdminLTE.min.css',
             'bootstrap-fileinput/css/fileinput.min.css',
-            'font-awesome/css/font-awesome.min.css',
+            '@fortawesome/fontawesome-free/css/fontawesome.min.css',
+            '@fortawesome/fontawesome-free/css/regular.min.css',
+            '@fortawesome/fontawesome-free/css/solid.min.css',
             'icheck/skins/square/blue.css',
             'toastr/build/toastr.min.css',
             'sweetalert2/dist/sweetalert2.min.css',
diff --git a/yarn.lock b/yarn.lock
index 8b32c5fd..a6d743d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -628,6 +628,10 @@
   dependencies:
     acorn "^5.2.1"
 
+"@fortawesome/fontawesome-free@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.2.0.tgz#50cd9856774351c56c0b1b0db4efe122d7913e58"
+
 "@types/jest@^23.3.1":
   version "23.3.1"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.1.tgz#a4319aedb071d478e6f407d1c4578ec8156829cf"