多语言展示
当前在线:1092今日阅读:190今日分享:11

利用layui样式,不用图片,实现星星图标

在html页面开发时,我们很多时候都会使用一些图标来美化页面,之前的做法通常都是使用一些小图片来做背景,但现在不需要做图片这样麻烦了,下面我们来看下使用layui库来实现星星图标。
方法/步骤
2

还需要将layui的字体文件放到font目录下,font目录和css目录同级。

3

接下来就很简单了,在html里写几个i标签就行了,要注意的是class样式要加上layui-icon layui-icon-rate。其中第一个是空心的星星,第二个是半心的,第三个是非空心的。

4

运行页面,我们可以看到现在页面上有三个星星图标了,我们没有使用任何的图标。而是使用字体图标。

5

使用字体图标有很多好处,除了不需要制作图片外,我们还可以任意改变图标的大小,只要设置其样式font-size就行了。

6

这样我们就可以看到几个较大的星星图标了。

7

和文字,字体一样,我们除了改变其大小,还可以改变其颜色,同样是加样式color就行了。

8

现在我们轻易的就得到了红色的星星图标了。

推荐信息