css3 100多个白色线性图标样式代码

分享 css3 100 多个白色线性图标样式代码，总共 100 多个，每一个图标都是利用 CSS3 的相关特性来实现。在这些 CSS3 图标中，有部分是动态图标，这些带动画的图标同样也是利用 CSS3 的动画属性实现的。

小白补脑：

首先，我们先恶补下什么是字体图标：用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。

优点：

1. 加载文件体积小
2. 统一展示风格，使用方法
3. 通过 font-size，color 就能自由变化大小，修改颜色，就像控制文字一样简单
4. 可以添加一些视觉效果如：阴影、旋转、透明度
5. 兼容 IE6
6. 后期维护成本很低

缺点：

1. 制作门槛有点高，需要借助专业的工具生成字库文件
2. 需要服务器做些相应的配置来解决识别问题和跨域问题

使用方法：

首先，在 head 头部引入字体 css 文件

<link rel="stylesheet" href="css/icono.min.css">

然后，在需要加入图标的地方通过对应的 css 类名调用

<i class="icono-share"></i>

更多个性化定制，阿里巴巴 Iconfont 平台不但免费提供了 1w 多个常用的图标，然后通过相关工具可以指定出大家喜欢的个性图标感兴趣的可以看一下我之前的一篇关于 icon 字体图标的制作方式《如何将 SVG 文件转换成图标字体文件》

下载方式：百度网盘 提取码：jdrj

以上关于css3 100多个白色线性图标样式代码的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。