快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

图标 Icon

概述

JUI默认主题提供了一套常用的图标集合。

使用方法

JUI Icon托管在阿里巴巴的iconfont平台,你可以通过加载css的方式进行引用:

<link rel="stylesheet" href="https://at.alicdn.com/t/font_1117544_1460h6l8xzkn.css">

通过设置类iconfont icon_*来定义和使用图标,*为图标值,如:

<span class="iconfont icon_success"></span>
<span class="iconfont icon_success_fill"></span>
不同颜色

用法:设置类j-**为颜色值,详情可查询 颜色 Color 文档。如:

<span class="iconfont icon_success j-success"></span>
<span class="iconfont icon_success_fill j-success"></span>
不同尺寸

JUI预设了8种常用图标尺寸。

用法:设置类iconfont-**为尺寸值,包含8种:iconfont-xxsiconfont-xsiconfont-siconfont-miconfont-liconfont-xliconfont-xxliconfont-xxxl。如:

<span class="iconfont icon_success iconfont-xl"></span>
<span class="iconfont icon_success iconfont-xxl"></span>
尺寸值 样式值
iconfont-xxs .8rem
iconfont-xs 1.2rem
iconfont-s 1.6rem
iconfont-m 2rem
iconfont-l 2.4rem
iconfont-xl 3.2rem
iconfont-xxl 4.8rem
iconfont-xxxl 6.4rem
自定义尺寸

用法:设置属性font="*"*为尺寸值,详情可查询 文字 Font 文档。如:

<span class="iconfont icon_success" font="36"></span>
<span class="iconfont icon_success_fill" font="48"></span>
图标集合

icon_home

icon_home_fill

icon_user

icon_user_fill

icon_group

icon_group_fill

icon_addpeople

icon_addpeople_fill

icon_addressbook

icon_addressbook_fill

icon_mine

icon_mine_fill

icon_id

icon_id_fill

icon_article

icon_article_fill

icon_service

icon_service_fill

icon_notice

icon_notice_fill

icon_remind

icon_remind_fill

icon_cart

icon_cart_fill

icon_comment

icon_comment_fill

icon_message

icon_message_fill

icon_mail

icon_mail_fill

icon_activity

icon_activity_fill

icon_task

icon_task_fill

icon_order

icon_order_fill

icon_list

icon_list_fill

icon_document

icon_document_fill

icon_barrage

icon_barrage_fill

icon_workbench

icon_workbench_fill

icon_manage

icon_manage_fill

icon_shielder

icon_shielder_fill

icon_tasklist

icon_tasklist_fill

icon_statistics

icon_statistics_fill

icon_computer

icon_computer_fill

icon_mobile

icon_mobile_fill

icon_search

icon_search_fill

icon_clock

icon_clock_fill

icon_select

icon_select_fill

icon_flashlight

icon_flashlight_fill

icon_flag

icon_flag_fill

icon_label

icon_label_fill

icon_view

icon_view_fill

icon_praise

icon_praise_fill

icon_heart

icon_heart_fill

icon_star

icon_star_fill

icon_location

icon_location_fill

icon_share

icon_share_fill

icon_warning

icon_warning_fill

icon_trash

icon_trash_fill

icon_empty

icon_empty_fill

icon_setup

icon_setup_fill

icon_edit

icon_edit_fill

icon_fullscreen

icon_fullscreen_fill

icon_smallscreen

icon_smallscreen_fill

icon_emoji

icon_emoji_fill

icon_lock

icon_lock_fill

icon_unlock

icon_unlock_fill

icon_flip

icon_flip_fill

icon_camera

icon_camera_fill

icon_image

icon_image_fill

icon_video

icon_video_fill

icon_live

icon_live_fill

icon_speak

icon_speak_fill

icon_qrcode

icon_qrcode_fill

icon_integral

icon_integral_fill

icon_redpacket

icon_redpacket_fill

icon_coupons

icon_coupons_fill

icon_rmb

icon_rmb_fill

icon_stealth

icon_stealth_fill

icon_prompt

icon_prompt_fill

icon_time

icon_time_fill

icon_feedback

icon_feedback_fill

icon_success

icon_success_fill

icon_delete

icon_delete_fill

icon_addition

icon_addition_fill

icon_minuses

icon_minuses_fill

icon_enter

icon_enter_fill

icon_play

icon_play_fill

icon_top

icon_bottom

icon_left

icon_right

icon_add

icon_minus

icon_submit

icon_close

icon_0

icon_1

icon_2

icon_3

icon_4

icon_5

icon_6

icon_7

icon_8

icon_9

icon_vip1

icon_vip2

icon_vip3

icon_vip4

icon_vip5

icon_vip6

icon_vip7

icon_vip8

icon_vip9

icon_vip10

icon_vipcode

icon_svipcode

icon_viptag

icon_sviptag

icon_crown

icon_crown1

icon_crown2

icon_crown3

icon_honor1

icon_honor2

icon_honor3

icon_honor4

icon_honor5

icon_honor6

icon_loading

icon_loading_1

icon_loading_2

icon_loading_3

icon_loading_4

icon_loading_5

icon_like

icon_fire

icon_wechat

icon_wechat_fill

icon_alipay

icon_alipay_fill

icon_wechat_pay

icon_smart_program

上一章:文字 Font
下一章:图片 Image