开发指南016-前端图标规范

简介: 平台为了保证统一性,做了很多约定,例如按钮图标等

平台为了保证统一性,做了很多约定,例如按钮图标等,平台规定图标取自这两个地方。在整个平台上运行的系统必须保持一致。在这个层面上不允许个性发挥。

1)    font-awesome

import 'font-awesome/css/font-awesome.min.css' // font-awesome

查图标:

https://www.runoob.com/font-awesome/fontawesome-reference.html

2)    element-ui图标

import 'element-ui/lib/theme-chalk/icon.css'

查图标:

https://element.eleme.cn/#/zh-CN/component/icon

规定如下

新增:<i class="el-icon-plus" />

查询:<i class="el-icon-search" />

重置:<i class="el-icon-refresh" />

刷新:<i class="el-icon-refresh-right" />

编辑/修改:<i class="el-icon-edit" />

删除:<i class="el-icon-delete" />

作废:<i class="el-icon-takeaway-box" />

分发:<i class="el-icon-position" />

设置:<i class="el-icon-setting" />

发布:<i class="el-icon-data-line" />

查看基本信息:<i class="el-icon-document" />

查看关联信息:<i class="el-icon-postcard" />

查看图片:<i class=" el-icon-picture-outline" />

查看流程:<i class="el-icon-notebook-2" />

查看日志: <i class="el-icon-collection-tag" />

确认:<i class="el-icon-check" />

关闭:<i class="el-icon-close" />

上传:<i class="el-icon-upload2 " />

下载:<i class="el-icon-download" />

打印:<i class="el-icon-printer " />

复制:<i class="el-icon-copy-document" />

关联:<i class="el-icon-connection" />

归档: <i class="el-icon-sell" />

启用:<i class="el-icon-video-play" />

禁用:<i class="el-icon-video-pause" />

打开/开通: <i class="el-icon-folder-opened " />

修改密码:<i class="el-icon-key" />

授权: <i class="el-icon-unlock" />

修改头像: <i class="el-icon-user" />

预览:<i class="el-icon-data-board" />

导出: <i class="el-icon-tickets" />

申报:<i class="el-icon-aim" />

切换:<i class="el-icon-sort" />

保存: <i class="el-icon-suitcase" />

取消/关闭:<i class="el-icon-switch-button" />

定位: <i class="el-icon-location-information" />

下一个: <i class="el-icon-right" />

通过: <i class="el-icon-folder-checked" />

退回: <i class="el-icon-folder-delete" />

目录
打赏
0
0
0
0
153
分享
相关文章
|
30天前
|
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
121 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
前端代码书写规范
前端代码规范提升项目可维护性和团队协作效率。关注项目命名清晰简洁、一致性,组件命名使用驼峰式且具描述性。JS遵循4空格缩进,分号结束语句,CSS按逻辑排序,HTML注重语义化。注释要功能性、文档化且简洁。遵循规范能减少错误,增强团队沟通。
342 3
如何从零到一建立前端规范
【10月更文挑战第6天】
112 2
开发指南047-前端模块版本
平台前端框架内置了一个文件version.vue
|
6月前
|
如何在前端项目中单独引入 ElementUI 图标以及使用
这篇文章介绍了如何在前端项目中单独引入Element UI的图标文件以及如何使用这些图标。
558 0
如何在前端项目中单独引入 ElementUI 图标以及使用
|
6月前
|
前端ElementPlus框架中的几种图标按钮使用方式
本文介绍了如何在Element Plus前端框架中使用带有图标的按钮,包括设置按钮大小、图标大小、按钮类型以及如何为图标添加点击事件。
572 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    24
  • 3
    详解智能编码在前端研发的创新应用
    16
  • 4
    巧用通义灵码,提升前端研发效率
    14
  • 5
    智能编码在前端研发的创新应用
    9
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    12
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    26
  • 8
    VSCode AI提效工具,通义灵码前端开发体验
    63
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    8
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    13
  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    28
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    63
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    5
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    35
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    67
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    31
  • 7
    巧用通义灵码,提升前端研发效率
    97
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    149
  • 9
    详解智能编码在前端研发的创新应用
    107
  • 10
    智能编码在前端研发的创新应用
    84
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等