东拼西凑完成一个“前端框架”(2) - 字体图标

时间 2020-01-07

标签东拼西凑完成一个前端框架字体图标繁體版

原文原文链接

前言

还记得之前开发的项目目录下都会存放一大堆图标文件，难以维护，同时图标和字体的对齐也是一个麻烦事儿；css

下面简单列出字体图标的优劣势，内容摘自图标字体的优缺点和使用html

优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会立刻渲染出来，不须要下载一个个图像。这样能够减小HTTP的请求数量，并且和HTML5的离线存储配合，能够对性能作出优化。前端
灵活性：不调字体能够像页面中的文字同样，经过font-size属性来对其进行大小的设置，并且还能够添加各类文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！git
兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，因此能够放心的使用它。
相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种状况。github

劣势

图标字体只能被渲染成单色，或者是CSS3的渐变色
版权上也有着对应的限制，固然仍是有不少免费的图标字体能够供咱们下载。
当本身创做图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高

目前我的推荐的图标库有 font-awesome、Bootstrap Glyphicons、Ionicons、themify-icons；浏览器

假如你想自定义一些字体图标，那么强力推荐阿里巴巴的 Iconfont前端框架

Start

iconfont

iconfont的使用就不赘述了，请移步Iconfont官方帮助文档，继续咱们的“前端框架”，在Iconfont的项目里加入了一些图标：

而后复制连接在浏览器中打开：
框架

新建一个icon.css文件，把代码粘贴进去；
新建一个页面，代码：frontend

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>首页-欢迎</title>
    <link href="css/icon.css" rel="stylesheet" />
</head>

<body>
    <i class="icon ls-icon-shrink-right"></i>
    <i class="icon ls-icon-spread-left"></i>
    <i class="icon ls-icon-user"></i>
    <i class="icon ls-icon-password"></i>
</body>

</html>

预览效果
ionic

源码地址

https://github.com/LaosanShang/ls-admin-frontend