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>

  显示效果:略

 

  总结:

  其实图标和按钮真的没什么不同,按钮能用的样式,图标也能用,所以图标我只写了这么点样式的说明。

semantic-ui 图标的更多相关文章

  1. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  2. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  3. 开始学习使用 Semantic UI

    最近在找一个功能比较丰富的前端框架,之前一直使用的Bootstrap,感觉组件还是不够丰富,很多东西都需要不少自定义.于是就发现了 Semantic UI. 不过感觉网上相关的中文资料好少,官方网站( ...

  4. Semantic UI 语义化设计的前端框架

    UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架. 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的,这使得开发更加直观(易 ...

  5. iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸

    iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨 ...

  6. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  7. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  8. 修改 Semantic UI 的默认字体

    Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...

  9. 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  10. Semantic UI基础使用教程

    自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...

随机推荐

  1. 解决git push时发现有超过100M的文件时,删除文件后,发现还是提交不上去的问题

    我这里故意放了一个超过100M的文件 后续,git add ,git commit 然后,git push 此时会发现出现了错误.如果,我们再这里直接在文件系统中删除这个大的文件,然后再次提交,会发现 ...

  2. Vue学习之路3-浅析Vue-cli搭建项目后的目录结构

    1.前言 Vue并不限制你的代码结构.但是,它规定了一些需要遵守的规则:1.应用层级的状态应该集中到单个store对象中.2.提交mutation是更改状态的唯一方法,并且这个过程是同步的.3.异步逻 ...

  3. Ubuntu 12.04上安装 MongoDB并运行

    Ubuntu 12.04上安装 MongoDB并运行 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在Terminal输入 sudo apt-key ...

  4. 软工团队 - UML设计

    软工团队 - UML设计 分工 对于分工我们没有不是按"自己负责部分的核心模块做练习"(每个人对每个图的某一模块来依次做完四个UML)的原因,是在于画这些图并不是都能彻底分成各个& ...

  5. 使用Docker在本地搭建Hadoop分布式集群

    学习Hadoop集群环境搭建是Hadoop入门必经之路.搭建分布式集群通常有两个办法: 要么找多台机器来部署(常常找不到机器) 或者在本地开多个虚拟机(开销很大,对宿主机器性能要求高,光是安装多个虚拟 ...

  6. C#字节数组与字符串转换

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. linux crontab定时器

    1.查看linux是否有crontab指令  如果没有安装crontab指令 yum install -y vixie-cron yum -y install crontabs 2.设置开机自启 ch ...

  8. Rancher学习笔记----在UI界面添加主机页面无法正常显示

    今天在学习rancher添加主机的时候,遇到了一个小问题,但是困扰老娘一上午 问题描述:在点击添加主机的时候,页面有跳转,但是页面显示为空,没有任何可选项.如下正常界面: 解决办法是:请换个浏览器

  9. 004_centos安装pip的几种方式及pip源

    一. (1) yum -y install epel-release yum install python-pip pip install --upgrade pip (2) python脚本的一键安 ...

  10. linux7 安装rac 执行root脚本时候报错

    运行root.sh脚本的时候报错 报错信息: [root@rac1 ~]# /u01/app/oraInventory/orainstRoot.sh Changing permissions of / ...