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

导语

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

    file

  • 复制出前端组件,需要重写内置视图

    官方操作

    file

    file

    file

    file

    file

第二步,去 Iconfont 官网挑选心仪的图标

声明所要修改的内容

file

注:进官网后,需要注册登录哦。

file

file

file

file

file

file

file

file

讲解一下上图中几个选择:

  • Unicode: 在你的代码中使用 Unicode 字符形式(如:)来显示图标
  • Font class: 在你的代码中使用 <i class="iconfont icon-xxx"></i> 的标签显示图标,同 Font-Awesome
  • Symbol(符号):上两种仅仅支持黑白图标,这种能够支持彩色图标。

具体图标代码开发文档:官方文档

第三步,生成 css 和 js 网络文件地址

file

file

file

file

额外注意一点: 当有新的图标加入 Iconfont 项目中时,需要重新生成 css 和 js 文件。在我们代码项目中修改成新的 css 和 js 引用,这是一个不算缺点的缺点。因为,新图标加入,不会影响其它图标,所以不需要进入代码里层修改,仅仅在 index.blade.php 中修改两行代码即可。

第四步,Laravel-admin 中引用

file

file

file

第五步,修改 Laravel-admin 侧边菜单栏的 <i></i> 标签

file

然后到后台->配置->菜单,对侧边栏的图标进行修改。

file

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

file

第六步,修改菜单管理控制器代码,修复图标显示问题

找到 MenuController.php 文件里面的 treeView 方法,并修改代码。

file

file

file

最终

截拉一卡车图。。。。。。那个关于 tree 结构的展开和合并,将 + - 号修改成文件夹的合和开,下一章,再讲吧,篇幅太长了。。。

本作品采用《CC 协议》,转载必须注明作者和本文链接

我们是一群被时空压迫的孩子。 ---- 爱因斯坦

本帖由系统于 3个月前 自动加精
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 2

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!