Files

李杨 b6648fda49 no message

Former-commit-id: 04ff224fa2c8d5591e0a8230b4aeae847afbb8b7
Former-commit-id: 1496783d2f59379399e5d35428a4ba960088f29d
Former-commit-id: f2ff6169d34894ac28b937fc6b66840880df0d87

2018-02-13 21:10:39 +08:00

1.1 KiB

Raw Blame History

图标

使用方法

基本

// 并无卵用的使用方式 等于 name="font-awesome"
<Icon></Icon>
// 指定图标名称
<Icon name="github"></Icon>
// 设置行内样式
<Icon name="github" style="font-size: 100px;"></Icon>
// 设置 class
<Icon name="github" class="icon-class-demo"></Icon>

这个组件只是简化了写法而已

<Icon name="github"></Icon>
// 等同于
<i class="fa fa-github" aria-hidden="true"></i>

参数

参数名	介绍	必选	值类型	可选值	默认值
name	图标名称	非	String	font-awesome 所有图标名	font-awesome

参考

图标索引

Font Awesome 中文网

fontawesome.com

PS. 示例中最后一个图标的样式 SCSS

<style lang="scss">
.icon-class-demo {
  transition: all .3s;
  font-size: 100px;
  color: #409EFF;
  cursor: pointer;
  user-select: none;
  &:hover{
    color: #F56C6C;
    transform: scale(1.2) rotate(30deg);
  }
}
</style>

1.1 KiB Raw Blame History

图标

使用方法

参数

参考

1.1 KiB

Raw Blame History