移动web-字体图标

目录

        1 字体图标

        2  图标库

        3上传矢量图    

1 字体图标

        使用场景：使用字体图标技巧实现网页中简洁的图标效果

        优点：

            灵活性：灵活地修改样式，例如：尺寸、颜色等

            轻量级：体积小、渲染快、降低服务器请求次数

            兼容性：几乎兼容所有主流浏览器

            使用方便：

                1. 下载字体包

                2. 使用字体图标

        注意：

            1.字体图标展示的是图标，本质是字体。

            2.用来处理简单的、颜色单一的图片

2 图标库

         iconfont-阿里巴巴矢量图标库

        下载字体包：

            登录 → 选择图标库  → 选择图标，加入购物车 → 购物车  → 添加至项目  → 下载至本地

        使用字体图标：

            1 Unicode编码

                引入样式表 iconfont.css

                复制粘贴图标对应的Unicode编码

                声明字体图标库 设置文字字体

            2 类名font class

                引入字体图标样式表

                调用图标对应的类名，必须调用2个类名

                    1 iconfont类：基本样式，包含字体的使用等

                    2 icon-xxx：图标对应的类名

            3 symbol 太麻烦 基本不用

3 上传矢量图：

            如果图标库没有项目所需的图标怎么办？IconFont网站上传矢量图生成字体图标

                1 与设计师沟通，得到SVG矢量图

                2 IconFont网站上传图标，下载使用

            步骤

                l 上传 → 上传SVG图标

                2 浏览本地图标 → 去除颜色提交

                3 加入购物车 → 下载使用