阿里巴巴iconfont的简单使用

来源：互联网发布：艾诺迪亚各项数据编辑：程序博客网时间：2024/05/16 04:11

今天写作业的时候，遇到了这样一个问题：
这里写图片描述

很明显，需要用到四个图标。其实上一次整理过一篇关于奥森图标使用方法的博客，今天也第一个想到去奥森图标的官网去找找看。可是奥森图标网站没有检索功能，我就那样一页一页地找啊，差点瞅瞎了我的超级无敌卡姿兰大眼睛也没找到（也许是我不会搜索，反正我是没找见在哪搜）。。。后来就又想到了老师之前介绍过的阿里巴巴iconfont，现将使用方法总结如下：

1.阿里巴巴iconfont
2.用微博账号登陆。
3.在搜索框内输入你要找的图标，在想要选择的图片下点击购物车图标保存
这里写图片描述
4.选好所有要找的图片之后，点击右上角的暂存架，把里面所有的目录都存储为新项目：

5.完成上一步之后，就会自动跳转到项目管理界面。

可以看到有两种方法可以将图标添加到自己的页面当中，但是通过第一种“获取在线链接”的方法我总是实现不出来，也不知道哪里出了问题。在这里留一个待解决的问题吧，接下来具体说第二种方法——“下载至本地”：

6.点击下载到本地。会发现有如下文件夹：
这里写图片描述
7.打开文件夹会发现有这些类型的文件：

a.打开demo.html会发现你需要的图标及它的Unicode编码。
b.将iconfont.css文件里的内容复制粘贴到你当前项目的css内容里。
c.将剩下的四个文件直接复制在你项目所在文件夹里
这里写图片描述
8.在html文件中需要添加图标的地方使用iconfont类名，如下：

注：i标签里面写上你想用的图标下面的Unicode值
9.可以通过控制iconfont类的属性改变图标的样式，比如：
这里写图片描述

例如：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{width:500px; height:200px; background-color:rgba(232,234,34,0.5); padding:20px;}@font-face {font-family: "iconfont";  src: url('iconfont.eot?t=1476610392'); /* IE9*/  src: url('iconfont.eot?t=1476610392#iefix') format('embedded-opentype'), /* IE6-IE8 */  url('iconfont.woff?t=1476610392') format('woff'), /* chrome, firefox */  url('iconfont.ttf?t=1476610392') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/  url('iconfont.svg?t=1476610392#iconfont') format('svg'); /* iOS 4.1- */}.iconfont {  font-family:"iconfont" !important;  font-size:16px;  font-style:normal;  -webkit-font-smoothing: antialiased;  -webkit-text-stroke-width: 0.2px;  -moz-osx-font-smoothing: grayscale;}.icon-fenlei:before { content: "\e600"; }.icon-gouwuche:before { content: "\e601"; }.icon-wode:before { content: "\e602"; }.icon-shouye-copy:before { content: "\e603"; }</style></head><body>    <div>        <i class="iconfont">&#xe603;</i>    </div></body></html>

这里写图片描述

这样，就可以在页面中对iconfont图标进行使用和修改了。

0 0