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

iconfont怎么用,4000个iconfont字体图标库使用教程

HTML5 太平洋学习网 浏览 评论

 之前不知道iconfont怎么用,然后看了iconfont阿里巴巴矢量图标库使用教程依然是不会,发现阿里巴巴的这个iconfont字体图标做得也太差了,经过朋友的介绍,我用上了google公司的Material Design Icons图标,很快就学会了。

Material Design Icons图标库中有4000多个字体图标,很够用,可以去它的官网:https://materialdesignicons.com/,由于是国外网站,用ie打开会很慢,可以用火狐或者谷歌浏览器打开(耐心等待),打开之后可以看到很多iconfont图标,如图所示。

QQ截图20171012200252.jpg

iconfont字体图标的使用方法

1:下载iconfont css以及font字体文件,点击这里下载,然后解压缩。

QQ截图20171012200611.jpg

2:将里面的materialdesignicons.min.css文件以及fonts文件夹里面的所有iconfont字体图标文件放入到你写项目中,如图所示。

QQ截图20171012200901.jpg

3:在html文件头部导入materialdesignicons.min.css,代码如下。

<link type="text/css" href="asset/css/materialdesignicons.min.css" rel="stylesheet"/>

4:iconfont图标怎么用呢?很简单,只要在官网首页,将鼠标移动到iconfont图标上,就会有该图标的英文名称,如图所示。

QQ截图20171012201423.jpg

1)然后我们只需要使用<i>标签,然后在class属性前面加入"mdi-"前缀+名称即可,如下所示。

<i class="mdi mdi-battery-charging"></i>

效果如下。

QQ截图20171012201743.jpg

2)如果要改变iconfont图标颜色,则直接使用style属性设置即可,代码如下。

<i class="mdi mdi-battery-charging" style="color: red"></i>

效果如下。

QQ截图20171012202021.jpg

3)iconfont怎么改变图标大小呢?很简单可以使用mdi-24px属性,还有mdi-18px,36px,42px等等,当然你也可以使用style="font-size: 24px"属性代替,如下。

//方法一
<i class="mdi mdi-battery-charging mdi-24px" style="color: red;"></i>
//方法二
<i class="mdi mdi-battery-charging" style="color: red;font-size: 24px"></i>

效果如下。

QQ截图20171012202808.jpg

4)如果要旋转iconfont图标,则可以使用mdi-rotate-45属性,45代表顺时针转45度的意思,代码如下。

<i class="mdi mdi-battery-charging mdi-rotate-45" style="color: red;font-size: 24px"></i>

效果如图。

QQ截图20171012203322.jpg

基本就是这些用法,很简单吧!

注意:Material Design Icons图标不仅可以用在<i>标签中的class,用在<a>标签中的class也是可以的,就用一个例子简单介绍下吧。

<a class="mdi mdi-home mdi-24px" href="/">Home</a>

效果如图。

QQ截图20171012203725.jpg

完毕!

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/html5/2017/1012/277.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论