Laravel-admin 局部使用阿里图标 Iconfont

全局使用:博客:Laravel 之道特别篇 4: Laravel-admin 关于如何使用图标神器 Iconfo...
局部使用:
效果图
image.png

表单代码如下

$form->html(view('admin.form.aliIcon', ['icons' => $this->icons()]), '图标');

private function icons()
{
        $css = file_get_contents('http://at.alicdn.com/t/font_828026_xxxxxxxxx.css');
        preg_match_all('/icon.+:/', $css, $matches);// eg: 73 => "icon-car:"

        $icons = [];
        $matches = $matches[0];

        foreach ($matches as $match){
            $icon = substr($match, 0, strlen($match) - 1);
            $icons[] = [
                'id' => $icon,
                'text' => $icon
            ];
        }

        return $icons;
    }

html 代码如下

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <style>
        .icon_li {
            display: inline-block;
            width: 15px;
            height: 15px
        }
    </style>

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_828026_xxxxxxx.css">
</head>

<body>
<div>
        <input id="icon" name="icon" value="" class="form-control icon" placeholder="图标选择" type="text">
        <div class="dropdown">
            <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">图标选择
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                @foreach ($icons as $icon)
                    <li value="{{$icon['id']}}" class="icon_li" role="presentation">
                        <i class="iconfont {{$icon['text']}}" style="font-size: 12px;"></i>
                    </li>
                @endforeach
            </ul>
    </div>
    {{--<select>
        @foreach ($icons as $icon)
            <option value ={{$icon['id']}}>
                <i class="iconfont {{$icon['text']}}" style="font-size: 12px;"></i>
            </option>
        @endforeach
    </select>--}}
</div>
<script src="http://at.alicdn.com/t/font_828026_xxxxxx.js"></script>
<script>
    $('.icon_li').click(function () {
        $('#icon').val($(this).attr('value'))
    })
</script>
</body>
</html>

总结:前端水平垃圾,出此下策。我用 php 代码正则匹配阿里图标 css 链接里的图标 class 名,生成数组。通过 laravel-admin 自带的 html 组件来渲染出所有的图标,html-select 标签不支持显示 icon,所以这里选择 bootstrap 的下拉菜单。其他的都是简单的 php,html 代码。

本作品采用《CC 协议》,转载必须注明作者和本文链接
爱余生
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。