阿里巴巴的矢量图标之字体图标
阿里巴巴的矢量图标之字体图标
今天纠结了一下，每次一些页面上面的小图标，指引之类的东西，都须要我很费劲的去使用css或者抠图去下载下来，我就在想，能不能有一个很棒的方法能让我偷偷懒，直接就像字体图标同样，就可使用了，可是以前学的字体图标的引用都有一个问题，就是我要在页面加载一个文件包才能使用那个网站的字体图标，这样会很耗费流量，对用户体验很差，我就在想，能不能有一个挺棒的方法，让我直接就能够在网上加载那些图标，而后我能够随意的使用~~~~没有想到，还真是让我给找到了，一个感受挺6的网站，那个就是阿里巴巴矢量图标库~~~~css
在网上看了很久，它的使用说明，终于，在不断的使用，失败之中，我知道怎么使用这个字体图标了，除了字体图标，还有字体之类的，等我研究出来，我再写.。。。如今只介绍字体图标浏览器
首先呢，要使用它这个字体图标，你得先登陆，登录很简单，微博，还有域帐号？？就能够登录了，这里我是用微博登录的测试
而后呢，首先在图标库里面找你须要的图标，好比我想找一个喇叭的图标 ，只须要在右上角输入喇叭，搜索
，不出意外的话，也没有什么意外啦，下面就有不少喇叭图标出来了。。。字体
随便点几个，它会自动保存到暂存架那里，保存的时候，你很容易的就能够发现的暂存架的位置的 ，这里我就懒得截图了。。。等你找到须要的图标以后 ，保存为新的项目，这里我这个项目的名字就测试，它会自动跳到你的图标管理里面，（若是没跳转，本身找图标管理界面）而后点击在线连接。。生成在线连接。网站
而后复制它的全部代码，放在样式里面。。。。这里要注意一个东西，我也弄了很久才弄好的，你直接复制到样式里面的话，它应该是下面的样子的spa
在这里有一个问题，咱们要在每个路径前面加上http:如图~~3d
这样 才能正常的加载，这里我弄很久的说。。。。blog
而后使用呢：微博
先声明一个类，那个类的字体就是你定义的字体 如图登录
大家能够看到 iconfont 就是咱们本身在前面定义的字体。。。不懂？看前面复制的代码，
而后有个小问题就是，由于这些图标我通常都是在伪类里面使用的；
伪类的使用有什么好处呢，那就是咱们能够减小，浏览器解析标签的数量 ，
字体图标的代码是什么呢，伪类里面的content的代码是属于16进制的
而后你在e600前面加上\就能够了（这个是伪类的用法）
若是你想直接在标签里面嗯  在那个图标下面有~
就这样，咱们能够发现，你已经使用上了字体图标。。。具体图标在什么位置，你能够在伪类里面定义它的样式，这里就不作介绍了。。。。