阿里iconfont官网提供的矢量图标用法介绍

最新推荐文章于 2024-10-30 01:12:29 发布

gang456789

最新推荐文章于 2024-10-30 01:12:29 发布

阅读量4.3k

点赞数

文章标签：矢量图阿里微博

本文链接：https://blog.youkuaiyun.com/gang456789/article/details/78233947

版权

　　阿里iconfunt官网对于图标的调用写的不够详细，许多初用者不会用，下面具体介绍下总结的两种方法：

在线调用方式

1、首先建立新浪微博账号，用微博号登录iconfunt官网；　　
2、所需要图标加入购物车；
3、存储为项目；
4、获取在线链接、生成在线链接；
5、选择fontclass在线css模式；
6、把在线链接粘贴到link标签；
7、用.iconfont如上，在里边随意修改样式；
8、在html中需要的位置写
此处写图标的编号&#…;；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.css">
</head>
<body>
<i class="iconfont">&#xe623;</i>
<i class="iconfont icon-rili"></i>
<i class="iconfont icon-jisuanqi"></i>
</body>
</html>

上面的href是我们获取在线链接、生成的在线链接；
这里写图片描述

当然我们选择第一种时，即：
这里写图片描述

代码需要这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            font-family: 'iconfont';  /* project id 441189 */
            src: url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.eot');
            src: url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.woff') format('woff'),
            url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:"iconfont" !important;
            font-size:46px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            color: #eee;
            /*height: 50px;*/
            /*width: 50px;*/
        }
    </style>
</head>
<body>
    <i class="iconfont">&#xe623;</i>
</body>
</html>

本人感觉第一种简单点，并推荐使用在线链接，因为下载使用的一个缺点是添加图标的话要重新把所有图标再下载一遍覆盖原来的文件，如果是在线链接只要重新生成一次链接就好了。

下载使用
如上图，点击下载至本地，然后解压，将iconfont.css文件，iconfont.eot文件，iconfont.ttf文件，iconfont.woff文件放到你的项目中去就可以使用了，

下面是font-class的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./iconfont.css">
    <style>
        .icon-my{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
<i class="iconfont icon-my"></i>
</body>
</html>

接这是unicode的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('iconfont.eot');
            src: url('iconfont.eot?#iefix') format('embedded-opentype'),
            url('iconfont.woff') format('woff'),
            url('iconfont.ttf') format('truetype'),
            url('iconfont.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:"iconfont" !important;
            font-size:46px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            color: #eee;
            /*height: 50px;*/
            /*width: 50px;*/
        }
    </style>
</head>
<body>
<i class="iconfont">&#xe682</i>
</body>
</html>

有木有感觉麻烦了，好了，下面说一下它们，
首先是unicode写法，它是最原始的写法，所以也比较复杂点，但兼容性特别好，
其次是font-class写法，它是目前使用最多的写法，兼容性良好，并且写法简单
最后symbol写法，它是未来的发展趋势，图片支持svg格式，它支持多色写法，当然目前浏览器渲染svg的性能一般，还不如png。兼容性较差，支持 ie9+,及现代浏览器。
最后需要说明，上面三种均可以通过设置字体样式来控制其大小（font size），颜色（color），突然感觉图片可以想字体一样（padding等）写样式，有木有感觉很简单
由于目前font-class写法已经满足我们的需要，这里不再叙述symbol写法，有兴趣的可以下去自己看看哦。