- 开始使用
- 功能组件
- 附加组件
- 教程
- 如何定制
- 布局示例
- 项目结构
- 使用 Less & Sass
- 创建主题
- 创建样式
- Customizer.json 变量
- JavaScript 示例
- 自定义前缀
- 基础
- 打印组件
- 网格组件
- 面板
- 块
- 文章
- 评论
- 效果
- Flex 布局
- 覆盖
- 导航菜单
- 导航栏
- 二级导航
- 面包屑
- 分页
- 选项卡
- 缩略图导航
- 列表
- 描述列表
- 表格组件
- 表单
- 按钮组件
- 图标
- 关闭
- 徽章
- 提示框组件
- 缩略图
- 遮罩
- 文本
- 列
- 动画组件
- 对比度
- 下拉菜单
- 模态对话框
- 抽屉
- 切换器
- 拨动组件
- 滚动监听
- 平滑滚动
- 动态网格
- 视差网格
- 圆点导航
- 滑动导航
- 动态分页
- 高级表单
- 文件表单
- 密码表单
- 选择表单
- 占位符
- 进度条
- 灯箱
- 自动完成
- 日期选择器
- HTML 编辑器
- 滚动条
- 滑块集
- 幻灯片
- 视差
- 手风琴
- 通知
- 搜索
- 可嵌套
- 可排序
- 附着
- 时间选择器
- 工具提示
- 上传
图标
使用图标字体,在任何地方放置矢量图标。
这个组件使用了由Dave Gandy发起的 Font Awesome 图标字体。Font Awesome为web相关行为提供了超过300个标志和符号。 由于允许你通过CSS简单地改变颜色、尺寸和其他样式,图标字体是很棒的选择。它们是可伸缩的矢量图形,这意味着它们在高分辨率设备上也能很好地显示。
用法
应用此组件,在任何 <i>
或 <span>
元素中添加 .uk-icon-*
类即可。瞧,你有了一个矢量图标,它能像文本一样继承了尺寸和色彩。
示例
- 使用
.uk-icon-cog
类 - 使用
.uk-icon-user
类 - 使用
.uk-icon-home
类 - 链接中的图标
标签
<!-- 图标 -->
<i class="uk-icon-cog"></i>
<!-- 链接中的图标 -->
<a href=""><i class="uk-icon-cog"></i> ...</a>
更多示例
按钮组
这个示例展示了每个按钮都带有图标的按钮租,来自 按钮组件 。
示例
按钮下拉菜单
这个示例展示了一个被分割成左边是正常按钮右边是下拉菜单切换按钮的按钮,来自下拉菜单组件。
示例
- Edit
- View
- Enable
- Trash
块引用
这个示例展示基础组件 中个块引用,它使用了一个大引号图标,还使用了效果组件中的.uk-align-left
类。
示例
这里的
<blockquote>
元素定义了一个较长的引用,同时也通过在其前后插入了空白间隔创建了一个新的块。
尺寸
添加.uk-icon-small
,.uk-icon-medium
或.uk-icon-large
类使一个图标更大。
- 这是默认尺寸。This is the default size.
- 这个图标使用
.uk-icon-small
类 - 这个图标使用
.uk-icon-medium
类 - 这个图标使用
.uk-icon-large
类
旋转
添加.uk-icon-spin
创建动画的旋转图标。Add the .uk-icon-spin
class to create animated spinning icons.
- 用于加载内容的旋转图标 ...
- 用于刷新内容的图标
图标的 hover 效果
使用 .uk-icon-hover
修饰器将锚文本做成图标效果,它添加了hover效果并溢出了链接下划线。
Example
Markup
<a href="" class="uk-icon-hover uk-icon-github"></a>
图标按钮
使用修饰类.uk-icon-button
创建一个图标按钮,可以完美地用于社交图标。
示例
标签
<a href="" class="uk-icon-button uk-icon-github"></a>
调整图标
为图标添加固定的宽度,并将其居中,只需添加 .uk-icon-justify
类名。在一个列表中使用不同的图标时是很有帮助的哦。
Example
- 调整过的图标
- 调整过的图标
- 调整过的图标
- 调整过的图标
Markup
<a href="" class="uk-icon-justify uk-icon-github"></a>
图标总览
这是所有一个所有可用的.uk-icon-*
类的总览,由Font Awesome提供。
Web 应用程序图标
交通工具图标
手势图标
性别图标
文件类型图标
旋转图标
表单控件图标
支付工具图标
货币
文本编辑器
方向
视频播放器
品牌图标
医疗类图标
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论