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
-
复制出前端组件,需要重写内置视图
第二步,去 Iconfont 官网挑选心仪的图标
声明所要修改的内容
注:进官网后,需要注册登录哦。
讲解一下上图中几个选择:
- Unicode: 在你的代码中使用 Unicode 字符形式(如:
)来显示图标 - Font class: 在你的代码中使用
<i class="iconfont icon-xxx"></i>
的标签显示图标,同 Font-Awesome - Symbol(符号):上两种仅仅支持黑白图标,这种能够支持彩色图标。
具体图标代码开发文档:官方文档
第三步,生成 css 和 js 网络文件地址
额外注意一点: 当有新的图标加入 Iconfont 项目中时,需要重新生成 css 和 js 文件。在我们代码项目中修改成新的 css 和 js 引用,这是一个不算缺点的缺点。因为,新图标加入,不会影响其它图标,所以不需要进入代码里层修改,仅仅在 index.blade.php 中修改两行代码即可。
第四步,Laravel-admin 中引用
第五步,修改 Laravel-admin 侧边菜单栏的 <i></i>
标签
然后到后台->配置->菜单,对侧边栏的图标进行修改。
第五步,修改默认的菜单管理控制器,我会将用户、角色、权限、菜单、历史操作的控制器都拷贝出来。进行重写
我的路由代码
<?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');
});
第六步,修改菜单管理控制器代码,修复图标显示问题
找到 MenuController.php
文件里面的 treeView
方法,并修改代码。
最终
截拉一卡车图。。。。。。那个关于 tree 结构的展开和合并,将 + - 号修改成文件夹的合和开,下一章,再讲吧,篇幅太长了。。。
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: