Laravel 之道特別篇 4： Laravel-admin 關於如何使用圖示神器 Iconfont

yuanshang發表於2018-11-29

Laravel

導語

Laravel-admin 相信大家都很熟悉了；首先，要感謝 song 大神給我們提供瞭如此優秀的後臺框架。

這一章節，我要講的是關於圖示的使用問題。

這是我們國內最牛逼，最令人興奮的圖示開源專案：阿里 Iconfont

吐槽與讚美。。

Font-Awesome，不得不說在國際上算是非常流行的圖示庫。但是它真是我們國內最好的選擇嗎？

總結一波這個圖示庫令我蛋疼難受的幾點：

相比於阿里 Iconfont，圖示量少的令人髮指。
相比於網速，訪問國外慢的令人髮指，你可能要說了，不是有國內 CDN 嗎，但是國內 CDN 更新也太慢了吧，人家版本都 5.5 了，國內 CDN 才 4.7，難受。。。並且多數我要用到的圖示都是 5.0 以上的。你又可能說，不是可以下載嗎，呵呵呵，5.0 以上的版本與 4.7 部分圖示不相容，我還要去專案中一個一個改，，我就呵呵呵了。。
最後很重要一點，Font-Awesome 好點的圖示要收費，收費。。。收費，我去！幾十塊錢我都不想交，量這麼少，升級個版本還不相容，你可以原地爆炸好吧。。。

我再來說說國內 Iconfont：

圖示量多得，我瞎搜，都能給我搜出一堆優美可愛圖示出來。。
並且支援彩色。哇，彩色圖示，網站逼格瞬間暴漲。。
網速快的像高鐵，畢竟阿里大廠出來的圖示庫，能不快嗎
並且支援程式碼開發，無需下載圖示
程式碼開發人家還分專案，根據專案情況自行定義需要的圖示
支援線上修改圖示。修改圖示呀，說說還有誰。。。
自己上傳到 Iconfont 的圖示，一鍵式繼承到自己的專案中，有愛啊
重點，免費，所有圖示包括彩色，想咋用咋用。。
。。。一堆，已經不能用言語表達我對她的喜愛之情了。。

廢話有點多，我正式進入如何使用 Iconfont 步驟中

第一步，安裝 Laravel-admin，做好初始化配置；

官方文件

安裝
```
composer require encore/laravel-admin
```

生成 config

php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"

生產專案程式碼，並安裝資料表
```
php artisan admin:install
```
請根據你的專案情況修改 configs/admin.php 裡面配置，這裡只是做演示用，就不改了。
換成中文

修改 configs/app.php 裡面的 locale 項，改成 zh-CN
複製出前端元件，需要重寫內建檢視

官方操作

第二步，去 Iconfont 官網挑選心儀的圖示

宣告所要修改的內容

file

注：進官網後，需要註冊登入哦。

file

講解一下上圖中幾個選擇：

Unicode: 在你的程式碼中使用 Unicode 字元形式（如：）來顯示圖示
Font class：在你的程式碼中使用 <i class="iconfont icon-xxx"></i> 的標籤顯示圖示，同 Font-Awesome
Symbol(符號)：上兩種僅僅支援黑白圖示，這種能夠支援彩色圖示。

具體圖示程式碼開發文件：官方文件

第三步，生成 css 和 js 網路檔案地址

file

額外注意一點：當有新的圖示加入 Iconfont 專案中時，需要重新生成 css 和 js 檔案。在我們程式碼專案中修改成新的 css 和 js 引用，這是一個不算缺點的缺點。因為，新圖示加入，不會影響其它圖示，所以不需要進入程式碼裡層修改，僅僅在 index.blade.php 中修改兩行程式碼即可。

第四步，Laravel-admin 中引用

file

第五步，修改 Laravel-admin 側邊選單欄的 `<i></i>` 標籤

file

然後到後臺->配置->選單，對側邊欄的圖示進行修改。

file

第五步，修改預設的選單管理控制器，我會將使用者、角色、許可權、選單、歷史操作的控制器都拷貝出來。進行重寫

file

我的路由程式碼

<?php

use Illuminate\Routing\Router;

//Admin::registerAuthRoutes(); 註釋掉

Route::group([
    'prefix'        => config('admin.route.prefix'),
    'namespace'     => config('admin.route.namespace'),
    'middleware'    => config('admin.route.middleware'),
], function (Router $router) {

    $router->get('/', 'HomeController@index');

    // 加入自己的管理路由
    $router->namespace('Auth')->group(function ($router) {
        $router->resource('auth/users', 'UserController');
        $router->resource('auth/roles', 'RoleController');
        $router->resource('auth/permissions', 'PermissionController');
        $router->resource('auth/menu', 'MenuController', ['except' => ['create']]);
        $router->resource('auth/logs', 'LogController', ['only' => ['index', 'destroy']]);
    });
    $router->get('auth/login', 'AuthController@getLogin');
    $router->post('auth/login', 'AuthController@postLogin');
    $router->get('auth/logout', 'AuthController@getLogout');
    $router->get('auth/setting', 'AuthController@getSetting');
    $router->put('auth/setting', 'AuthController@putSetting');
});

file