开发指南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" />

相关文章
|
1月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
79 4
|
1月前
|
开发框架 前端开发 JavaScript
从前端到后端——完整的Web开发指南
【2月更文挑战第1天】Web开发已经成为了现代软件开发中不可或缺的一部分。无论是前端还是后端,都扮演着重要的角色。本文将从前端到后端,介绍完整的Web开发流程和技术栈,帮助初学者快速入门Web开发。
|
1月前
|
前端开发 JavaScript API
前端代码书写规范
前端代码规范提升项目可维护性和团队协作效率。关注项目命名清晰简洁、一致性,组件命名使用驼峰式且具描述性。JS遵循4空格缩进,分号结束语句,CSS按逻辑排序,HTML注重语义化。注释要功能性、文档化且简洁。遵循规范能减少错误,增强团队沟通。
95 3
|
1月前
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
【4月更文挑战第30天】本文介绍了在Flutter中管理图标、字体和样式的做法。Flutter提供`Icons`类用于内置矢量图标,支持第三方图标库如FontAwesome。自定义字体可通过添加字体文件至`assets`目录并配置`pubspec.yaml`,然后使用`TextStyle`设置。借助`ThemeData`,开发者能统一管理应用主题样式,局部样式可覆盖全局。通过集中管理样式,提升代码复用性和应用一致性。
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
|
1月前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
28 0
|
1月前
|
前端开发 JavaScript
|
1月前
|
前端开发 API 微服务
开发指南005-前端配置文件
就前端而言,很多系统修改配置是在代码里修改,然后打包或者是修改编译环境来重新编译
开发指南005-前端配置文件
|
1月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
1月前
|
前端开发 JavaScript 算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作,包括缩进(用2空格)、命名(变量 camelCase,常量 MY_CONSTANT,类 PascalCase)、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性,但需按项目需求调整。不断学习新规范以适应前端技术发展。
37 1
|
1月前
|
存储 前端开发
开发指南018-前端存储
src/utils/qlm_store.js封装了前端存储底层函数。登录后的用户信息都是通过调用底层函数进行保存的。