UIkit-icon类学习记录

如何画一个icon?

用css画吧。画个图标会累死人的。还是站在前人的肩膀上比较好。

如何用uikit给html元素添加图标?

uikit有个图标库,添加这个引用就ok了。
举个例子给标题h2添加图标
。使用方法就是给加入一个i标签。这个i和html中的斜体可不一样。
如下给i标签加入了uk-icon-arrow-circle-down类之后就有了图标。

<h2><i class="uk-icon-arrow-circle-down"></i>see blow</h2>

结果如图

image.png

给图标添加旋转效果

加一个uk-icon-spin类就可以了(uk是uikit的缩写。)

<h2><i class="uk-icon-arrow-circle-down uk-icon-spin"></i>see blow</h2>

让图标看起来像个按钮

<h2 onclick="a()"><i class="uk-icon-github uk-icon-button"></i></h2>

结果如下

image.png

这个的目的就是把正常的图标加点修饰,看起来像个按钮,一般的图标你也不会点击,对吧。

图标动画效果

比如,本来是淡色的,鼠标悬浮之后变成深色的

<h2 onclick="a()"><i class="uk-icon-github uk-icon-hover"></i></h2>

图标 - UIkit 中文文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容