iconfontのsymbol的使用

最新推荐文章于 2024-04-22 14:07:34 发布

weixin_30612769

最新推荐文章于 2024-04-22 14:07:34 发布

阅读量326

点赞数

原文链接：http://www.cnblogs.com/guangzan/p/11222927.html

版权

iconfontのsymbol的使用

iconfont三种方式的优缺点

unicode
优点：

1.兼容性最好，支持ie6+
2.支持按字体的方式去动态调整图标大小，颜色等等
缺点：
1.不支持多色图标
2.在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难
3.不直观，看unicode码很难分辨什么图标

fontclass

1.兼容性良好，支持ie8+
2.相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么

symbol

1.支持多色图标了，不再受单色限制
2.支持像字体那样通过font-size,color来调整样式。
3.支持 ie9+
4.可利用CSS实现动画
5.减少HTTP请求
6.矢量，缩放不失真
7.可以很精细的控制SVG图标的每一部分

下面是使用symbol方式的详细步骤

使用步骤

进入https://www.iconfont.cn/选择一个你喜欢的图标库，将图标加入购物车。
点击右上角购物车打开购物车
加入项目，没有就新建一个项目，点击确定，跳转到我的项目
（菜单栏->图标管理->我的项目）,点击下载到本地
把如图js文件移动到项目中
使用 demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>icon</title>

    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-food-macaron"></use>
    </svg>

    <script src="./icon/iconfont.js"></script>
</body>

</html>

效果

注意xlink:href的值前面带有#，在我的项目中，每个图标对应一个id。

补充

快速将多个图标添加到购物车，控制台输入如下代码执行

var icon=document.getElementsByClassName('icon-gouwuche1');
for(var i=0;i<icon.length;i++){
    icon[i].click();
}

转载于:https://www.cnblogs.com/guangzan/p/11222927.html

weixin_30612769

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iconfontのsymbol的使用

iconfontのsymbol的使用iconfont三种方式的优缺点unicode优点：1.兼容性最好，支持ie6+2.支持按字体的方式去动态调整图标大小，颜色等等缺点：1.不支持多色图标2.在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的...
复制链接

扫一扫