Laravel 之道特别篇 4： Laravel-admin 关于如何使用图标神器 Iconfont

falling-ts 的个人博客 / 4111 / 3 / 创建于 5年前 / 更新于 5年前

导语

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