semantic-ui 图标
semantic-ui提供了很多的图标,基本常用的在官网上面都能找到。要想记住这么多图标是不可能的,但是也是有简便方法记忆。
首先,图标其实和按钮的区别基本没有,要说有的话,也就是基础样式的大小不同吧,按钮较大一点,当然也是可以加大小的值来设置。
学习semantic的图标有这个简洁方法:
1、图标只能使用i标签,不能使用div、span、button标签。
2、按钮的名称全部转为小写之后,下载class中,然后加一个icon即可。
1、基础图标
<i class="home icon"></i>
<i class="setting icon"></i>
<i class="alarm icon"></i>
2、定义图标大小
在图标的class中直接添加大小值即可。
<i class="home mini icon"></i>
<i class="setting large icon"></i>
<i class="alarm huge icon"></i>
3、设置图标颜色
和按钮没区别,直接在图标的class中加颜色即可
<i class="home mini red icon"></i>
<i class="setting large blue icon"></i>
<i class="alarm huge pink icon"></i>
4、动画按钮
在semantic ui中,提供了三种按钮动画,分别是左右移动、上下移动、淡入淡出
因为要加动画效果,所以class要加一个animated
因为要动画,那么就必须有些东西是隐藏的,有些东西是显示的,所以显示的内容的class设置为visible content,隐藏的内容设置为hidden content。
如果不指定动画,则默认是左右移动,那么上下移动和淡入淡出就是在外层的div或者span上加一个vartical,fade即可
<div class="ui animated button"><div class="visible content">家</div><i class="hidden content"><i class="home icon"></i></i>
</div>
显示效果:略
总结:
其实图标和按钮真的没什么不同,按钮能用的样式,图标也能用,所以图标我只写了这么点样式的说明。
转载于:https://www.cnblogs.com/-beyond/p/8984374.html
semantic-ui 图标相关推荐
- Semantic UI 之 图标 icon
第一步:创建项目 添加JQuery和Semantic UI包.创建icon.html页面: 第二步:icon.html页面 <!DOCTYPE html> <html lang=&q ...
- semantic ui html5,css中什么是Semantic UI框架?
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
- 【项目实战】个人博客(SpringBoot,SSM,thymeleaf,Semantic UI)——从设计思路到部署一站式教学
一.前言 1.项目背景 此项目并非原创,项目原型是李仁密老师的作品,具体的教学视频来自b站https://www.bilibili.com/video/BV1nE411r7TF,不过up主貌似也是搬运 ...
- datagridview 手动添加的行如何进行重载_【厚积薄发】如何规划UI图标图集
这是第151篇UWA技术知识分享的推送.今天我们继续为大家精选了若干和开发.优化相关的问题,建议阅读时间10分钟,认真读完必有收获. UWA 问答社区:answer.uwa4d.com UWA QQ群 ...
- UI图标设计素材|风格多样的图标
无论是软件标识类图标还是功能标识类图标,都需要讲究"创意". 图标服务于更实用的目的,适合描述非常具体的概念.而插图使用隐喻和叙述来描绘大的主题 概念.优图 www.uppsd.c ...
- 一招学会绘制UI图标超椭圆
原创不易,如需转载,请附上本文链接,谢谢支持 https://blog.csdn.net/weixin_44775811/article/details/109372997 超椭圆是介于"方 ...
- 扁平化ui设计界面的方式以及扁平化ui图标设计特点
扁平化是近两年手机图标设计发展的一种趋势,因此作为一名全栈UI设计师,扁平化ui设计界面的方式以及扁平化ui图标设计特点还是非常熟悉的.今天就跟大家谈谈扁平化ui设计界面的方式以及扁平化ui图标设计特 ...
- 2016 Micu课堂王铎UI图标设计特训班高级高清原版教程
2016 Micu课堂王铎UI图标设计特训班高级高清原版教程 下载地址:http://www.javaxxz.com/thread-283753-1-2.html
- php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统,后端基于CodeIgniter,前端基于Semantic UI 2.2.10...
羽翼后台管理平台(博客系统) 羽翼的由来 羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...
- 8个免费的高质量UI图标大全网站
UI图标素材是设计师必不可少的设计元素. 高质量的UI图标会让设计师的设计效率事半功倍. 本文分享8个免费的高质量UI图标大全网站. 即时设计资源社区 即时设计资源广场中精选了多款专业免费的UI图标设 ...
最新文章
- 字符串,枚举,数值之间的转换
- 趣学python3(37)-合并所有目录及子目录的文本文件为一个文件
- Linux网络子系统
- python copy()和deepcopy()解释(import copy)
- Python url编码、url解码
- mysql 创建索引 终止_技术分享 | 常见索引问题处理
- HTML5 CANVAS 弹幕插件
- 创业公司如何切入巨头垄断的芯片市场?
- 工业数据采集网关的特点及应用场景
- 你要的理论、法则、定律、效应都在这里了
- 计算机软件著作权可以查询他人的源代码和申请材料吗?
- [从头读历史] 第249节 易经
- 8-2 Android 摄像头和相册
- [软件项目管理] BCWS、BCWP、ACWP的理解
- Centos7上配置安装Squid代理(主动代理,与透明代理)
- java毕业设计奥利给共享自习室系统(附源码、数据库)
- java课程设计-文本编辑器
- 可以设计一个电子三缝干涉实验
- APICloud开发从入门到放弃(零)
- elasticsearch-rest-high-level-client操作elasticsearch
热门文章
- 用代码告诉你“问世间情为何物,直教人生死相许”
- JAVA map排序实现
- 整形二维数组中求最大值Max,行(row)和列(colum)。
- 年薪 10 万的虚拟人,网友直呼“破防”:工资比我都高啊?
- ObjectArx与VS版本对应关系及AutoCAD R版本
- Redisson 使用手册
- Luogu P3353 在你窗外闪耀的星星
- 七夕来了,你还没有女朋友?Python 追女生神器!每天坚持给她发早安
- vivo oppo 手机8.1.0 webview加载H5白屏问题
- 【平面设计】AI CC2018软件安装教程