小白如何在html css里使用字体图标~

之前写过用户手册,所以借平台练习一下写作,哦吼吼~

字体图标经常使用的是

阿里图标库的:http://www.iconfont.cn/

icomoon图标库的:https://icomoon.io/

下面就介绍一下icomoon库的字体图标使用方法~~~=。=~~~

【最终效果】


【第一步】:

打开链接进入icomoon图标库(https://icomoon.io/)

单击右上角的这个按钮,进入图标选择界面

【第二步】:

点选你需要的图标,类似加入购物车啦

下面的Selectionxxx(选中xx个)会清点你选了多少个图标。然后单进入你的已选图标界面,设置图标旁边的preferences(偏好设置), 选择支持ie8,ie7&1e6,单击右下角 下载即可。

【第三步】:

解压下载的字体图标包,拷贝ie7和font两个文件夹到你的站点里面去。

大概是这个样子的:


【第四步】:

拷贝下载的字体图标包里面的文件style.css里面的内容到你的css页面

大概是这个样子的:


然后重新修改@font-face里面的链接,和【重要】删掉这个东西“?m3vgb7”,比如

修改前:

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?m3vgb7');
  src:  url('fonts/icomoon.eot?m3vgb7#iefix') format('embedded-opentype')

改为内部链接:

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot');
  src:  url('../fonts/icomoon.eot#iefix') format('embedded-opentype')

最后:

就可以最新所欲的用下载到的字体图标啦!!!

直接就可以用了哦!!!

例如:

                                108已发布
10草稿箱
申请中
90已通过
1被驳回

BTW:css定义一下标签里面的字体的大小属性(font-size=20px 2.0rem)就可以改变图标的大小哦!!!

你可能感兴趣的:(前端)