图标

UI为用户提供了200个线型字体图标,使用字体图标的好处就是大小和颜色可以自由控制,同时还能方便的增加背景等效果。使用图标时请确保字体文件和css文件在同一目录下。

使用方法: <i class="aui-iconfont aui-icon-menu"></i>

图标的对应可以使用参考代码演示,在图标名称下方都有对应的名称,修改.aui-icon-*即可。

同时AUI也是支持自定义图标的,但是需要避免名称的重复。


<style>
.iconname,.iconcode{display:none}
.fontclass{font-size:10px}
</style><div class="aui-content"><ul>
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">appreciate</div>
                <div class="iconcode"></div><div class="fontclass">appreciate</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">check</div>
                <div class="iconcode"></div><div class="fontclass">check</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">close</div>
                <div class="iconcode"></div><div class="fontclass">close</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">edit</div>
                <div class="iconcode"></div><div class="fontclass">edit</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">emoji</div>
                <div class="iconcode"></div><div class="fontclass">emoji</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">favor_fill</div>
                <div class="iconcode"></div><div class="fontclass">favorfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">favor</div>
                <div class="iconcode"></div><div class="fontclass">favor</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">loading</div>
                <div class="iconcode"></div><div class="fontclass">loading</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">location_fill</div>
                <div class="iconcode"></div><div class="fontclass">locationfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">location</div>
                <div class="iconcode"></div><div class="fontclass">location</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">phone</div>
                <div class="iconcode"></div><div class="fontclass">phone</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round_check_fill</div>
                <div class="iconcode"></div><div class="fontclass">roundcheckfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round_check</div>
                <div class="iconcode"></div><div class="fontclass">roundcheck</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round_close_fill</div>
                <div class="iconcode"></div><div class="fontclass">roundclosefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round_close</div>
                <div class="iconcode"></div><div class="fontclass">roundclose</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round_right_fill</div>
                <div class="iconcode"></div><div class="fontclass">roundrightfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round_right</div>
                <div class="iconcode"></div><div class="fontclass">roundright</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">search</div>
                <div class="iconcode"></div><div class="fontclass">search</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">time_fill</div>
                <div class="iconcode"></div><div class="fontclass">timefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">time</div>
                <div class="iconcode"></div><div class="fontclass">time</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">taxi</div>
                <div class="iconcode"></div><div class="fontclass">taxi</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">unfold</div>
                <div class="iconcode"></div><div class="fontclass">unfold</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">warn_fill</div>
                <div class="iconcode"></div><div class="fontclass">warnfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">warn</div>
                <div class="iconcode"></div><div class="fontclass">warn</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">camera_fill</div>
                <div class="iconcode"></div><div class="fontclass">camerafill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">camera</div>
                <div class="iconcode"></div><div class="fontclass">camera</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">comment_fill</div>
                <div class="iconcode"></div><div class="fontclass">commentfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">comment</div>
                <div class="iconcode"></div><div class="fontclass">comment</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">like_fill</div>
                <div class="iconcode"></div><div class="fontclass">likefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">like</div>
                <div class="iconcode"></div><div class="fontclass">like</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">notification_fill</div>
                <div class="iconcode"></div><div class="fontclass">notificationfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">notification</div>
                <div class="iconcode"></div><div class="fontclass">notification</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">order</div>
                <div class="iconcode"></div><div class="fontclass">order</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">same_fill</div>
                <div class="iconcode"></div><div class="fontclass">samefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">same</div>
                <div class="iconcode"></div><div class="fontclass">same</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">deliver</div>
                <div class="iconcode"></div><div class="fontclass">deliver</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">evaluate</div>
                <div class="iconcode"></div><div class="fontclass">evaluate</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">pay</div>
                <div class="iconcode"></div><div class="fontclass">pay</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">send</div>
                <div class="iconcode"></div><div class="fontclass">send</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">shop</div>
                <div class="iconcode"></div><div class="fontclass">shop</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">ticket</div>
                <div class="iconcode"></div><div class="fontclass">ticket</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">back</div>
                <div class="iconcode"></div><div class="fontclass">back</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">cascades</div>
                <div class="iconcode"></div><div class="fontclass">cascades</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">discover</div>
                <div class="iconcode"></div><div class="fontclass">discover</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">list</div>
                <div class="iconcode"></div><div class="fontclass">list</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">more</div>
                <div class="iconcode"></div><div class="fontclass">more</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">my_fill</div>
                <div class="iconcode"></div><div class="fontclass">myfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">my</div>
                <div class="iconcode"></div><div class="fontclass">my</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">scan</div>
                <div class="iconcode"></div><div class="fontclass">scan</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">settings</div>
                <div class="iconcode"></div><div class="fontclass">settings</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">question_fill</div>
                <div class="iconcode"></div><div class="fontclass">questionfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">question</div>
                <div class="iconcode"></div><div class="fontclass">question</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">shop_fill</div>
                <div class="iconcode"></div><div class="fontclass">shopfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">form</div>
                <div class="iconcode"></div><div class="fontclass">form</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">pic</div>
                <div class="iconcode"></div><div class="fontclass">pic</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">filter</div>
                <div class="iconcode"></div><div class="fontclass">filter</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">footprint</div>
                <div class="iconcode"></div><div class="fontclass">footprint</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">top</div>
                <div class="iconcode"></div><div class="fontclass">top</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">pull_down</div>
                <div class="iconcode"></div><div class="fontclass">pulldown</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">pull_up</div>
                <div class="iconcode"></div><div class="fontclass">pullup</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">right</div>
                <div class="iconcode"></div><div class="fontclass">right</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">refresh</div>
                <div class="iconcode"></div><div class="fontclass">refresh</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">more_android</div>
                <div class="iconcode"></div><div class="fontclass">moreandroid</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">delete_fill</div>
                <div class="iconcode"></div><div class="fontclass">deletefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">refund</div>
                <div class="iconcode"></div><div class="fontclass">refund</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">cart</div>
                <div class="iconcode"></div><div class="fontclass">cart</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">qr_code</div>
                <div class="iconcode"></div><div class="fontclass">qrcode</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">remind</div>
                <div class="iconcode"></div><div class="fontclass">remind</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">delete</div>
                <div class="iconcode"></div><div class="fontclass">delete</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">profile</div>
                <div class="iconcode"></div><div class="fontclass">profile</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">home</div>
                <div class="iconcode"></div><div class="fontclass">home</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">cart_fill</div>
                <div class="iconcode"></div><div class="fontclass">cartfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">discover_fill</div>
                <div class="iconcode"></div><div class="fontclass">discoverfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">home_fill</div>
                <div class="iconcode"></div><div class="fontclass">homefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">message</div>
                <div class="iconcode"></div><div class="fontclass">message</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">address_book</div>
                <div class="iconcode"></div><div class="fontclass">addressbook</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">link</div>
                <div class="iconcode"></div><div class="fontclass">link</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">lock</div>
                <div class="iconcode"></div><div class="fontclass">lock</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">unlock</div>
                <div class="iconcode"></div><div class="fontclass">unlock</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">vip</div>
                <div class="iconcode"></div><div class="fontclass">vip</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">activity</div>
                <div class="iconcode"></div><div class="fontclass">activity</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">friend_add_fill</div>
                <div class="iconcode"></div><div class="fontclass">friendaddfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">friend_add</div>
                <div class="iconcode"></div><div class="fontclass">friendadd</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">friend_famous</div>
                <div class="iconcode"></div><div class="fontclass">friendfamous</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">friend</div>
                <div class="iconcode"></div><div class="fontclass">friend</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">goods</div>
                <div class="iconcode"></div><div class="fontclass">goods</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">selection</div>
                <div class="iconcode"></div><div class="fontclass">selection</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">explore</div>
                <div class="iconcode"></div><div class="fontclass">explore</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">present</div>
                <div class="iconcode"></div><div class="fontclass">present</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">square_check_fill</div>
                <div class="iconcode"></div><div class="fontclass">squarecheckfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">square</div>
                <div class="iconcode"></div><div class="fontclass">square</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">square_check</div>
                <div class="iconcode"></div><div class="fontclass">squarecheck</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round</div>
                <div class="iconcode"></div><div class="fontclass">round</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round_add_fill</div>
                <div class="iconcode"></div><div class="fontclass">roundaddfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round_add</div>
                <div class="iconcode"></div><div class="fontclass">roundadd</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">add</div>
                <div class="iconcode"></div><div class="fontclass">add</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">notification_forbid_fill</div>
                <div class="iconcode"></div><div class="fontclass">notificationforbidfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">explore_fill</div>
                <div class="iconcode"></div><div class="fontclass">explorefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">fold</div>
                <div class="iconcode"></div><div class="fontclass">fold</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">game</div>
                <div class="iconcode"></div><div class="fontclass">game</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">redpacket</div>
                <div class="iconcode"></div><div class="fontclass">redpacket</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">selection_fill</div>
                <div class="iconcode"></div><div class="fontclass">selectionfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">similar</div>
                <div class="iconcode"></div><div class="fontclass">similar</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">appreciate_fill</div>
                <div class="iconcode"></div><div class="fontclass">appreciatefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">info_fill</div>
                <div class="iconcode"></div><div class="fontclass">infofill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">info</div>
                <div class="iconcode"></div><div class="fontclass">info</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">forward_fill</div>
                <div class="iconcode"></div><div class="fontclass">forwardfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">forward</div>
                <div class="iconcode"></div><div class="fontclass">forward</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">recharge_fill</div>
                <div class="iconcode"></div><div class="fontclass">rechargefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">recharge</div>
                <div class="iconcode"></div><div class="fontclass">recharge</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">vipcard</div>
                <div class="iconcode"></div><div class="fontclass">vipcard</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">voice</div>
                <div class="iconcode"></div><div class="fontclass">voice</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">voice_fill</div>
                <div class="iconcode"></div><div class="fontclass">voicefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">friend_favor</div>
                <div class="iconcode"></div><div class="fontclass">friendfavor</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">wifi</div>
                <div class="iconcode"></div><div class="fontclass">wifi</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">share</div>
                <div class="iconcode"></div><div class="fontclass">share</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">we_fill</div>
                <div class="iconcode"></div><div class="fontclass">wefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">we</div>
                <div class="iconcode"></div><div class="fontclass">we</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">light_auto</div>
                <div class="iconcode"></div><div class="fontclass">lightauto</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">light_forbid</div>
                <div class="iconcode"></div><div class="fontclass">lightforbid</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">light_fill</div>
                <div class="iconcode"></div><div class="fontclass">lightfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">camera_rotate</div>
                <div class="iconcode"></div><div class="fontclass">camerarotate</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">light</div>
                <div class="iconcode"></div><div class="fontclass">light</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">bar_code</div>
                <div class="iconcode"></div><div class="fontclass">barcode</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">flashlight_close</div>
                <div class="iconcode"></div><div class="fontclass">flashlightclose</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">flashlight_open</div>
                <div class="iconcode"></div><div class="fontclass">flashlightopen</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">search_list</div>
                <div class="iconcode"></div><div class="fontclass">searchlist</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">service</div>
                <div class="iconcode"></div><div class="fontclass">service</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">sort</div>
                <div class="iconcode"></div><div class="fontclass">sort</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">down</div>
                <div class="iconcode"></div><div class="fontclass">down</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">mobile</div>
                <div class="iconcode"></div><div class="fontclass">mobile</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">mobile_fill</div>
                <div class="iconcode"></div><div class="fontclass">mobilefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">copy</div>
                <div class="iconcode"></div><div class="fontclass">copy</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">countdown_fill</div>
                <div class="iconcode"></div><div class="fontclass">countdownfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">countdown</div>
                <div class="iconcode"></div><div class="fontclass">countdown</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">notice_fill</div>
                <div class="iconcode"></div><div class="fontclass">noticefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">notice</div>
                <div class="iconcode"></div><div class="fontclass">notice</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">upstage_fill</div>
                <div class="iconcode"></div><div class="fontclass">upstagefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">upstage</div>
                <div class="iconcode"></div><div class="fontclass">upstage</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">choiceness_fill</div>
                <div class="iconcode"></div><div class="fontclass">choicenessfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">choiceness</div>
                <div class="iconcode"></div><div class="fontclass">choiceness</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">clothes_fill</div>
                <div class="iconcode"></div><div class="fontclass">clothesfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">clothes</div>
                <div class="iconcode"></div><div class="fontclass">clothes</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">creative_fill</div>
                <div class="iconcode"></div><div class="fontclass">creativefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">creative</div>
                <div class="iconcode"></div><div class="fontclass">creative</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">female</div>
                <div class="iconcode"></div><div class="fontclass">female</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">keyboard</div>
                <div class="iconcode"></div><div class="fontclass">keyboard</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">male</div>
                <div class="iconcode"></div><div class="fontclass">male</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">pull_left</div>
                <div class="iconcode"></div><div class="fontclass">pullleft</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">pull_right</div>
                <div class="iconcode"></div><div class="fontclass">pullright</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">rank_fill</div>
                <div class="iconcode"></div><div class="fontclass">rankfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">rank</div>
                <div class="iconcode"></div><div class="fontclass">rank</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">bad</div>
                <div class="iconcode"></div><div class="fontclass">bad</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">camera_add</div>
                <div class="iconcode"></div><div class="fontclass">cameraadd</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">focus</div>
                <div class="iconcode"></div><div class="fontclass">focus</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">friend_fill</div>
                <div class="iconcode"></div><div class="fontclass">friendfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">camera_add_fill</div>
                <div class="iconcode"></div><div class="fontclass">cameraaddfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">apps</div>
                <div class="iconcode"></div><div class="fontclass">apps</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">paint_fill</div>
                <div class="iconcode"></div><div class="fontclass">paintfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">paint</div>
                <div class="iconcode"></div><div class="fontclass">paint</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">pic_fill</div>
                <div class="iconcode"></div><div class="fontclass">picfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">refresh_arrow</div>
                <div class="iconcode"></div><div class="fontclass">refresharrow</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">mark_fill</div>
                <div class="iconcode"></div><div class="fontclass">markfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">mark</div>
                <div class="iconcode"></div><div class="fontclass">mark</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">present_fill</div>
                <div class="iconcode"></div><div class="fontclass">presentfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">repeal</div>
                <div class="iconcode"></div><div class="fontclass">repeal</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">album</div>
                <div class="iconcode"></div><div class="fontclass">album</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">people_fill</div>
                <div class="iconcode"></div><div class="fontclass">peoplefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">people</div>
                <div class="iconcode"></div><div class="fontclass">people</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">service_fill</div>
                <div class="iconcode"></div><div class="fontclass">servicefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">repair</div>
                <div class="iconcode"></div><div class="fontclass">repair</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">file</div>
                <div class="iconcode"></div><div class="fontclass">file</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">repair_fill</div>
                <div class="iconcode"></div><div class="fontclass">repairfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">taoxiaopu</div>
                <div class="iconcode"></div><div class="fontclass">taoxiaopu</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">attention_fill</div>
                <div class="iconcode"></div><div class="fontclass">attentionfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">attention</div>
                <div class="iconcode"></div><div class="fontclass">attention</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">command_fill</div>
                <div class="iconcode"></div><div class="fontclass">commandfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">command</div>
                <div class="iconcode"></div><div class="fontclass">command</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">community_fill</div>
                <div class="iconcode"></div><div class="fontclass">communityfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">community</div>
                <div class="iconcode"></div><div class="fontclass">community</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">read</div>
                <div class="iconcode"></div><div class="fontclass">read</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">calendar</div>
                <div class="iconcode"></div><div class="fontclass">calendar</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">cut</div>
                <div class="iconcode"></div><div class="fontclass">cut</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">magic</div>
                <div class="iconcode"></div><div class="fontclass">magic</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">backward_fill</div>
                <div class="iconcode"></div><div class="fontclass">backwardfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">forward_fill</div>
                <div class="iconcode"></div><div class="fontclass">forwardfill1</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">play_fill</div>
                <div class="iconcode"></div><div class="fontclass">playfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">stop</div>
                <div class="iconcode"></div><div class="fontclass">stop</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">tag_fill</div>
                <div class="iconcode"></div><div class="fontclass">tagfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">tag</div>
                <div class="iconcode"></div><div class="fontclass">tag</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">group</div>
                <div class="iconcode"></div><div class="fontclass">group</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">move</div>
                <div class="iconcode"></div><div class="fontclass">move</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">all</div>
                <div class="iconcode"></div><div class="fontclass">all</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">back_delete</div>
                <div class="iconcode"></div><div class="fontclass">backdelete</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">hot_fill</div>
                <div class="iconcode"></div><div class="fontclass">hotfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">hot</div>
                <div class="iconcode"></div><div class="fontclass">hot</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">post</div>
                <div class="iconcode"></div><div class="fontclass">post</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">radio_box</div>
                <div class="iconcode"></div><div class="fontclass">radiobox</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">round_down</div>
                <div class="iconcode"></div><div class="fontclass">rounddown</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">upload</div>
                <div class="iconcode"></div><div class="fontclass">upload</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">video_fill</div>
                <div class="iconcode"></div><div class="fontclass">videofill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">video</div>
                <div class="iconcode"></div><div class="fontclass">video</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">write_fill</div>
                <div class="iconcode"></div><div class="fontclass">writefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">write</div>
                <div class="iconcode"></div><div class="fontclass">write</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">radio_box_fill</div>
                <div class="iconcode"></div><div class="fontclass">radioboxfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">punch</div>
                <div class="iconcode"></div><div class="fontclass">punch</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">shake</div>
                <div class="iconcode"></div><div class="fontclass">shake</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">add</div>
                <div class="iconcode"></div><div class="fontclass">add1</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">move</div>
                <div class="iconcode"></div><div class="fontclass">move1</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">safe</div>
                <div class="iconcode"></div><div class="fontclass">safe</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">activity_fill</div>
                <div class="iconcode"></div><div class="fontclass">activityfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">crown_fill</div>
                <div class="iconcode"></div><div class="fontclass">crownfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">crown</div>
                <div class="iconcode"></div><div class="fontclass">crown</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">goods_fill</div>
                <div class="iconcode"></div><div class="fontclass">goodsfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">message_fill</div>
                <div class="iconcode"></div><div class="fontclass">messagefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">profile_fill</div>
                <div class="iconcode"></div><div class="fontclass">profilefill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">sound</div>
                <div class="iconcode"></div><div class="fontclass">sound</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">sponsor_fill</div>
                <div class="iconcode"></div><div class="fontclass">sponsorfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">we_unblock</div>
                <div class="iconcode"></div><div class="fontclass">weunblock</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">we_block</div>
                <div class="iconcode"></div><div class="fontclass">weblock</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">up_block</div>
                <div class="iconcode"></div><div class="fontclass">upblock</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">sponsor</div>
                <div class="iconcode"></div><div class="fontclass">sponsor</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">baby_fill</div>
                <div class="iconcode"></div><div class="fontclass">babyfill</div></li>
        
            <li class="aui-col-xs-3">
            <i class="aui-iconfont"></i>
                <div class="iconname">baby</div>
                <div class="iconcode"></div><div class="fontclass">baby</div></li>
        
    </ul></div>