layui添加图标的方法

了解layui添加图标的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

layui添加图标的方法:首先打开iconfont官网并选择中意的字体图标库,然后在项目中点击”下载至本地”,并将解压的文件复制到本地的项目中,最后在本地项目引入相关html代码即可。

layui2.0及以前版本的字体图标不能满足项目的需求,其图标来源于阿里巴巴www.iconfont.cn,所以自己手动丰富了项目字体图标库,记录如下。

<强> 1,添加字体图标至购物车

打开www.iconfont.cn,选择中意的字体图标库,添加至“库”(即字体购物车图标),如下图所示

<强> 2,将图标添加至项目

点击右侧“购物车图标”,然后将选中的字体图标添加至项目。建议新建项目,方便以后扩展。

<强> 3,下载并引入代码

在项目中,点击“下载至本地“,然后将解压的文件复制到本地的项目中,并在本地引入iconfont。css文件即可。

<强> 4,选择字体图标

在浏览器中打开,demo_unicode。html文件,按照文件提示,在本地项目引入相关html代码即可。
如& lt;我类=癷confont"在3 & lt;/i>

若是layui,为样式美观,可修改iconfont。css的修改css代码如下

.iconfont{字体类型:“iconfont"!重要; 　　字体样式:正常; 　　-webkit-font-smoothing:平滑; 　　显示:inline-block; 　　-webkit-text-stroke-width: 0.2 px; 　　字体大小:14 px; 　　过渡:所有0.4线性0;-o-transition:所有0.2线性0;-moz-transition:所有0.2线性0; 　　}

5,以后若需要再添加字体图标,重复上述步骤,直接在阿里巴巴iconfont下载项目代码至本地,覆盖以往的代码(iconfont。css除外),即可使用新的字体图标。

感谢各位的阅读!看完上述内容,你们对layui添加图标的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。

layui添加图标的方法