最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

hui iconfont字体图标使用示例_iconfont怎么用?

HTML5 太平洋学习网 浏览 评论

 hui iconfont是hui.admin网站在阿里巴巴字体图标库打包的200多个iconfont字体图标,如果觉得少的话可以看本站的 Material Design Icons 4000个字体图标库,Material Design Icons的强大之处在于它不仅iconfont图标多,而且还可以旋转图标,不过这里还是来看看hui iconfont怎么用吧?

所谓的iconfont字体图标实际上就是font字体,设置颜色,大小都可以直接使用style属性来设置,非常的简单。

QQ截图20171024160812.jpg

第一步:下载hui-iconfont字体图标文件,解压zip压缩文件。

QQ截图20171024161113.jpg

解压,并放到你的项目目录中,如下。

QQ截图20171024160911.jpg

第二步:引入iconfont字体图标css,引入有两种方式。

//方式一:引入压缩的css文件,可以加速项目加载速度
<link href="lib/Hui-iconfont/1.0.8/iconfont.min.css" rel="stylesheet" type="text/css">

//方式二:引入未压缩的css
<link href="lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css">

第三步:调用hui iconfont字体图标。

//方式一:i标签直接引入
<i class="Hui-iconfont">&#xe6b2;</i>

//方式二:以class类名引入
<i class="Hui-iconfont Hui-iconfont-tianqi-yu"></i>
来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/html5/2017/1024/318.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论