一级菜单添加页面，图标的一些处理。

最初时，图标需要输入一个字符串。但是难免会出错。
所以，使用一个 redio 单选框，来做这件事。
先看 form组件：

from django import forms
from django.utils.safestring import mark_safe
from rbac import models

ICON_LIST = [
    ['fa-hand-scissors-o', '<i aria-hidden="true" class="fa fa-hand-scissors-o"></i>'],
    ['fa-hand-spock-o', '<i aria-hidden="true" class="fa fa-hand-spock-o"></i>'],
    ['fa-hand-stop-o', '<i aria-hidden="true" class="fa fa-hand-stop-o"></i>'],
    ['fa-handshake-o', '<i aria-hidden="true" class="fa fa-handshake-o"></i>'],
    ['fa-hard-of-hearing', '<i aria-hidden="true" class="fa fa-hard-of-hearing"></i>'],
    ['fa-hashtag', '<i aria-hidden="true" class="fa fa-hashtag"></i>'],
    ['fa-hdd-o', '<i aria-hidden="true" class="fa fa-hdd-o"></i>'],
    ['fa-headphones', '<i aria-hidden="true" class="fa fa-headphones"></i>'],
    ['fa-heart', '<i aria-hidden="true" class="fa fa-heart"></i>'],
    ['fa-heart-o', '<i aria-hidden="true" class="fa fa-heart-o"></i>'],
    ['fa-heartbeat', '<i aria-hidden="true" class="fa fa-heartbeat"></i>'],
    ['fa-history', '<i aria-hidden="true" class="fa fa-history"></i>'],
    ['fa-home', '<i aria-hidden="true" class="fa fa-home"></i>'],
    ['fa-hotel', '<i aria-hidden="true" class="fa fa-hotel"></i>'],
    ['fa-hourglass', '<i aria-hidden="true" class="fa fa-hourglass"></i>'],
    ['fa-hourglass-1', '<i aria-hidden="true" class="fa fa-hourglass-1"></i>'],
    ['fa-hourglass-2', '<i aria-hidden="true" class="fa fa-hourglass-2"></i>'],
    ['fa-hourglass-3', '<i aria-hidden="true" class="fa fa-hourglass-3"></i>'],
    ['fa-hourglass-end', '<i aria-hidden="true" class="fa fa-hourglass-end"></i>'],
    ['fa-hourglass-half', '<i aria-hidden="true" class="fa fa-hourglass-half"></i>'],
    ['fa-hourglass-o', '<i aria-hidden="true" class="fa fa-hourglass-o"></i>'],
    ['fa-hourglass-start', '<i aria-hidden="true" class="fa fa-hourglass-start"></i>'],
    ['fa-i-cursor', '<i aria-hidden="true" class="fa fa-i-cursor"></i>'],
    ['fa-id-badge', '<i aria-hidden="true" class="fa fa-id-badge"></i>'],
    ['fa-id-card', '<i aria-hidden="true" class="fa fa-id-card"></i>'],
    ['fa-id-card-o', '<i aria-hidden="true" class="fa fa-id-card-o"></i>'],
    ['fa-image', '<i aria-hidden="true" class="fa fa-image"></i>'],
    ['fa-mail-reply-all', '<i aria-hidden="true" class="fa fa-mail-reply-all"></i>'],
    ['fa-reply', '<i aria-hidden="true" class="fa fa-reply"></i>'],
    ['fa-reply-all', '<i aria-hidden="true" class="fa fa-reply-all"></i>'],
    ['fa-retweet', '<i aria-hidden="true" class="fa fa-retweet"></i>'],
    ['fa-wrench', '<i aria-hidden="true" class="fa fa-wrench"></i>']]

for item in ICON_LIST:
    item[1] = mark_safe(item[1])


class MenuForm(forms.ModelForm):
    '''菜单form'''

    class Meta:
        model = models.Menu
        fields = ["title", "icon"]
        widgets = {
            "title": forms.TextInput(attrs={"class": "form-control"}),
            "icon": forms.RadioSelect(
                choices=ICON_LIST,
                attrs={'class': 'clearfix'}
            )
        }

为 icon 字段，选择的是 RadioSelect 进行渲染。 choices参数接收一个列表套嵌列表的结构。其中每个列表的第一个参数是真实要保存到数据库的值。
第二个参数，是要进行展示的图标的，样子。
这里需要使用 mark_safe() 将这个标签字符串，进行一下处理。目的是告诉django 这个标签是可信任的，不要变成特殊符号。
否则在页面看到的，就是一堆字符串，而不是图标。
为了好看，给icon生成的， ul 添加了一个属性 attrs={'class': 'clearfix'}。清除浮动。
在页面当中，清除 ul li 和 i 标签的默认样式，并且写一点样式。展示时更好看：

{% block css %}
    <style type="text/css">
        ul {list-style-type: none;padding: 0;}
        ul li {float: left;padding: 10px;padding-left: 0;width: 80px;}
        ul li i {font-size: 18px;margin-left: 5px;color: #6d6565;}
    </style>
{% endblock %}

这是在，主页面单独开放的一个 block 。用于添加css代码。

一级菜单添加页面， 图标的一些处理。

一级菜单添加页面，图标的一些处理。