在html页面开发时,我们很多时候都会使用一些图标来美化页面,之前的做法通常都是使用一些小图片来做背景,但现在不需要做图片这样麻烦了,下面我们来看下使用layui库来实现星星图标。
方法/步骤
2
还需要将layui的字体文件放到font目录下,font目录和css目录同级。
3
接下来就很简单了,在html里写几个i标签就行了,要注意的是class样式要加上layui-icon layui-icon-rate。其中第一个是空心的星星,第二个是半心的,第三个是非空心的。
4
运行页面,我们可以看到现在页面上有三个星星图标了,我们没有使用任何的图标。而是使用字体图标。
5
使用字体图标有很多好处,除了不需要制作图片外,我们还可以任意改变图标的大小,只要设置其样式font-size就行了。
6
这样我们就可以看到几个较大的星星图标了。
7
和文字,字体一样,我们除了改变其大小,还可以改变其颜色,同样是加样式color就行了。
8
现在我们轻易的就得到了红色的星星图标了。
上一篇:excel如何制作星星图标
下一篇:Ai绘制光质感星星的图标