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

糖黄 2019-12-11

前言

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

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

优势

  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。

  • 灵活性：不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！

  • 兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。
    相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种情况。

劣势

  • 图标字体只能被渲染成单色，或者是CSS3的渐变色
  • 版权上也有着对应的限制，当然还是有很多免费的图标字体可以供我们下载。
  • 当自己创作图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高

目前个人推荐的图标库有 font-awesome、Bootstrap Glyphicons、Ionicons、themify-icons；

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

Start

iconfont

iconfont的使用就不赘述了，请移步Iconfont官方帮助文档，继续我们的“前端框架”，在Iconfont的项目里加入了一些图标：
东拼西凑完成一个“前端框架”(2) - 字体图标
然后复制链接在浏览器中打开：
东拼西凑完成一个“前端框架”(2) - 字体图标

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

<!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>

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

糖黄

糖黄

相关推荐

你应该知道的11个微前端框架

微前端将前端整体分解为许多更小、更易管理的片段。每个团队可以端到端地拥有自己的功能，可以在自己的代码库中工作，可以独立发布版本，可以不断进行小的增量升级，还可以通过 API 与其他团队集成，以便他们可以一起组建和管理页面和应用程序。本文中，作者收集了 1

南昌千网科技 / 0评论 2020-10-18

Flask框架前端后端交互之传递Json数据

方案一：后端使用 jsonify（）方法响应前端Json数据

chencourage / 0评论 2020-07-28

Vue.js前端框架系统学习（5）——Vue指令之v-for, v-on, v-bind, v-model

接上一篇文章，这篇文章来整理一下其他的一些vue指令。先申明一下，关于指令的一些概念都搬运自官网，如果有哪些不理解可以直接上官网进行学习。Expects: Array | Object | number | string | Iterable . 基于源数

Symiac / 0评论 2020-07-04

框架主要是基于.net core 进行的后端Web API的开发二

简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能，本篇随笔继续深化这一主题，着重介绍基于ABP后端接口信息，实现对前端界面的开发工作。ABP框架主要还是基于领域驱动的理念来构建整个架构的，其中领域驱动包含的概念有 域对象Entities、仓储

xxuncle / 0评论 2020-07-04

Vue.js前端框架系统学习（4）——Vue指令之v-text,v-html,v-if,v-show

指令 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我们现在components目录下新建一个Dere

Symiac / 0评论 2020-07-04

为什么使用前端框架

刚工作那会，前端都是用HTML+CSS+JS来写的,现在各种前端框架层出不穷，基本都是引入前端框架来构建前端，为什么？　　React提供的JSX和Vue提供的模板目的是为了实现声明式渲染的功能。　　状态与视图之间的映射关系，等同于render函数。

bowean / 0评论 2020-06-28

个人技术总结---Android前端界面框架搭建

学习该技术的原因，技术的难点在哪里。编写Android前端界面，搭建基本框架让app界面更加美观。由于本次软件定义为Android方向，所以Android前端界面搭建美观就很重要，在初期考虑使用框架搭建还是自己打的时候，我们在网上查了很多有关Android

风萧萧梦潇 / 0评论 2020-06-14

前端测试框架Jest总结

为了降低上线的bug，使用TypeScript，Flow, Eslint ,StyleLint这些工具可以实现。前端自动化测试工具普及情况不是很好。测试分为单元测试，集成测试和端到端测试。单元测试主要是对一个独立的功能单元进行的测试，通过一个小例子来了解前

woxxoole / 0评论 2020-06-13

新技术新框架不断涌现，目前学习web前端开发都要掌握什么？

web前端开发由网页制作演变而来，随着web2.0的发展，网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。前端开发市场仍然有着大量的需求。而随着H5、微信小程

RainyX / 0评论 2020-06-12

[推荐]好书推荐前端自动化测试框架 ——Cypress从入门到精通

　　《前端自动化测试框架 ——Cypress从入门到精通》是一本介绍软件自动化测试框架搭建、使用及定制方面的技术书籍，更是一本端到端自动化测试的专业指导书。包括目前流行的前端自动化测试工具基本介绍，Cypress测试框架的主要特点、性能比较，Cypress

abdstime / 0评论 2020-06-10

前端测试框架 Jest

前端测试工具也和前端的框架一样纷繁复杂，其中常见的测试工具，大致可分为测试框架、断言库、测试覆盖率工具等几类。在正式开始本文之前，我们先来大致了解下它们：。测试框架的作用是提供一些方便的语法来描述测试用例，以及对用例进行分组。用于统计测试用例对代码的测试情

smj000 / 0评论 2020-06-09

Web前端MVC框架的意义分析

　　Web前端开发是Web技术发展中的一个重要组成部分，在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点，即以页面为主体来展示界面中的信息。然而随着科学技术的不断进步，Web前端开发形式上变得更为复杂，但是其功能方面也逐渐实现了与用户间

学习web前端 / 0评论 2020-06-07

基于jQuery+Bootstrap前端框架的.Net快速开发平台

Learun是一款.net快速开发平台，基于ASP.NET MVC、jQuery、Bootstrap、Dapper ORM等众多优秀框架开发而成，包含了代码 生成器，让您一键生成的后台代码以及前台页面。前端采用的jQuery-ui让您更加方便使用各个元素，

Beibeizhao / 0评论 2020-05-28

前端网红框架的插件机制全梳理（axios、koa、redux、vuex）

前言前端中的库很多，开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求，但是总有无法预料到的，所以优秀的库就需要提供一种机制，让开发者可以干预插件中间的一些环节，从而完成自己的一些需求。本文将从koa、axios、vuex和redux的实现来教你怎

jiangcs0 / 0评论 2020-05-22

前端框架和库的区别

jquery库 相当于 dom操作+请求。art-template库相当于模板引擎。框架 =全方位功能齐全。即简易的dom体验+发请求+模板引擎+路由功能+数据管理。一般使用库的代码是调用某个函数，我们自己把控库的代码。一般使用框架，其框架在帮我们运行我们

唯美st丶 / 0评论 2020-05-15

关于vue项目前后端打通

1.本地安装了一个MySQL8，中间因为路径中存在中文，一直有问题，后面采用全英文路径没有出现问题

究极死胖兽 / 0评论 2020-05-12

微前端框架是怎么导入加载子应用的

微前端似乎是最近一个很火的话题，我们也即将使用在生产环境中，接下来会更新一系列微前端源码分析、手写微前端文章。那么registerMicroApps,到底做了什么呢？上面代码里最重要的，如果我们entry传入字符串，那么就会使用这个函数去加载HTML内容。

龙旋 / 0评论 2020-04-22

转型web前端工程师怎样学才能拿高薪？过分依赖IDE，框架成为致命点！

前端开发工程师不仅要掌握基本的web前端开发技术、网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。一般来说，UI设计师会倾向于流畅靓丽，但并不

元元 / 0评论 2020-04-20

Web前端开发必不可少的9个开源框架

大多数人想到Web开发时，通常会想到HTML或JavaScript，往往忽略了CSS，根据Wikipedia的说法，CSS既是网页中最重要也是最常被遗忘的部分之一，尽管它是万维网的三大基础技术之一。今天就和大家分享9个流行的、强大的前端开源框架，帮助你轻松

杏仁技术站 / 0评论 2020-04-15

Web前端开发必不可少的9个开源框架

大多数人想到Web开发时，通常会想到HTML或JavaScript，往往忽略了CSS，根据Wikipedia的说法，CSS既是网页中最重要也是最常被遗忘的部分之一，尽管它是万维网的三大基础技术之一。今天就和大家分享9个流行的、强大的前端开源框架，帮助你轻松

小秋 / 0评论 2020-04-15

2020 前端框架测评总结

作为一名前端开发人员，持续学习是必备的技能之一。随着新技术的不断涌现，前端开发框架越来越多，各种框架现、版本的更新此起彼伏。前端领域的技术不断更迭，让人眼花缭乱。为此，前端开发工程师 Jacek Schae 写了一篇博文，对目前比较热门的前端框架进行了总

小秋 / 0评论 2020-04-09

前端工程师必须了解的主流前端框架

现在前端工程师的工作已经不想几年前那样，仅仅写一些页面调整一下样式就可以拿到高薪了。由于前端技术的发展，以及企业对前端工程师的要求越来越高，现在前端工作也越来越复杂。不过只要掌握目前比较流行的主流框架，完全可以轻松应对老板提出的各种需求。已经从事前端工作，

starzhangkiss / 0评论 2020-04-07

2020年前端框架的比较

首先让我开始-绝对不是您应该为前端选择的比较。它是对三个方面的比较小而相对简单的：性能，大小和非常相似的应用程序的代码行。我们正在比较RealWorld应用程序-不仅仅是"要做"的应用程序。通常，"待办事项"没有传达

唯美st丶 / 0评论 2020-03-25

前端开发：构建Web应用程序的前10个JavaScript框架

多年来，业界已经发布了大量 JavaScript 框架，怎样进行选择可能是一个挑战。如果你感到困惑，不知道应该选哪个或者究竟哪个适合你，那么我已经帮你解决了问题。在本文中，千锋广州前端小编将列出用来构建 Web 应用程序的前10个 JavaScript

小秋 / 0评论 2020-03-20

前端框架及项目面试－聚焦Vue、React、Webpack

本章讲解 Vue 基本使用、组件使用、高级特性和 Vuex Vue-router ，这些部分的知识点和面试题。第6章 Vue3预学习Vue3 发布在即。本章介绍 Vue3 的升级内容，以及使用 Proxy 实现响应式。其他内容待 Vue3 正式发布、使用之

wwwxuewen / 1评论 2020-03-02

公司框架-微服务-从前端找到后端

项目前端框架用的vue写的，自己对于vue也不是很熟悉，上网百度了一下，才知道vue其实和javascript类似的语言很相似。vue中的template标签模块类似于html, script标签模块类似于之前学习过的JavaScript，style标签模

Symiac / 0评论 2020-02-18

前端框架 React 基础-模块划分1

1React里面的所有静态页面都写在public文件夹下面，比如img图片文件夹，在src文件夹下面的index.js文件里面，如果要引入pulic下的图片文件夹，是相对应于public里面的index.html的相对路径

究极死胖兽 / 0评论 2020-02-13

常用vue前端UI框架

View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。一个为 Vue JS 2.0 打造的 Material 风格的组件库,喜欢material design的朋友可以去尝试一下

前端架构师 / 0评论 2020-02-10

前端框架选型

倾听业务人员、项目负责人等相关者的需求，进行用户访谈，收集相关的需求。寻找潜在的可行性技术方案。整理出功能列表中的功能需求和跨功能性需求。找出会严重影响开发的风险点。　　出现在项目准备期和成长优化期，　　是架构设计1~6步中的一个决策，　　例如我们的项目的

草原孤狼 / 0评论 2020-02-01

2.前端开发工程师的练成

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础。悬着器、dom操作、特效和动画。方法链、拖拽、变形、jQueryUI组件基本使用。跨终端Web和主流设备简介、视口、流式布局、弹性盒子、tem、移动终端JS事件、手机

学习web前端 / 0评论 2020-01-23

Vue—前端框架

通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目。-- 了解v-on:为事件绑定的指令 -->. -- methods为事件提供实现体-->

wwwxuewen / 0评论 2019-12-30

东拼西凑完成一个“前端框架”(6) - 按钮

定义了常规状态后，我们还需要定义按钮的 hover、disabled、active、focus的状态：。下面是按钮的子类，参照 BootStrap ,我也把按钮的子类区分为 Primary、Success、Danger、Info、Warn、Link，下面以

学习web前端 / 0评论 2020-01-09

前端框架Vue入门

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够

smj000 / 0评论 2020-01-07

响应式布局---2. Bootstrap前端开发框架

Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。-- 要求当前页面使用IE浏览器最高版本的内核来渲染 -->. -- 一定不要忘记引

乔乔 / 0评论 2020-01-06

前端框架

Angular、 React、Vue是目前三大主流的前端框架，这三个框架都有很好的性能，都支持数据绑定，组件等基本功能。这是第一次在2010年10月发布。React由Facebook开发和维护。但是会丢失一些灵活性。这个时候，小巧的vue就成了首选。生态虽

wwwxuewen / 0评论 2020-01-04

前端如何入门面对传统的html，css，js，三大框架react，vue，angular？

并且Jquery这种插件也基本被废弃，nginx，linux相关知识。看看这些公司招聘需求，

wwwxuewen / 0评论 2019-12-25

ssm+shiro权限框架+eleme前端框架（上传图片的坑）

在之前做一个4s店维修管理系统时，登录权限用到了shiro框架，在前后端分离的情况下，登录成功后，后台会向前台传个token回来，前端的session会记录登录用户的所有信息，每当前端向后台发送axios请求时都会携带个token传向后台，// confi

前端架构师 / 0评论 2019-12-19

东拼西凑完成一个“前端框架”(4) - Tabs页

东拼西凑完成一个后台 ”前端框架“ - 字体图标。在完成了侧边栏后，后台的基础架子已经基本出来了；下面是来加入Tab页面，正在纠结于Tab页面是否用现成的轮子，

smj000 / 0评论 2019-12-18

web前端工程师必学框架：Flutter详细教程

最爱折腾的就是前端工程师了，从 jQuery 折腾到 AngularJs，再折腾到 Vue、React。最爱跨屏的也是前端工程师，从 phonegap，折腾到 React Native，这不又折腾到了 Flutter。低成本地为用户带来更优秀的用户体验。目

liangjielaoshi / 0评论 2019-12-18

LayUI前端框架开发视频讲解

课程目录:1-1、认识layui前端框架1-2、演示LayUI弹出框2-1、内置图标的使用2-2、按钮的使用2-3、CSS动画效果2-4、表单的使用2-5、选项卡的定义2-6、进度条的使用3-1、认识layui容器3-2、认识栅格系统3-3、栅格的使用3-

究极死胖兽 / 0评论 2019-12-14

前端框架Vue自学之Vue组件化开发（三）

本博客目的：记录Vue学习的进度和心得

林大夏 / 0评论 2019-12-13

前端框架Vue自学之Vue基础语法（二）

内容：通过官网说明，掌握Vue基础语法。

bowean / 0评论 2019-12-12

前端基础框架-css

<div style="background-color: red;height: 100px;width: 100px">背景色</div>第二种方法是在head里面写需要和body里面创建关系。--#代表调用

somboy / 0评论 2019-12-12

前端知识框架1

DOCTYPE html><html lang="en"><head> ----头部 <meta charset="UTF-8"> <title>T

smj000 / 0评论 2019-12-12

东拼西凑完成一个“前端框架”(1) - 布局

等许多非常优秀的前端框架；本着程序员折腾的精神，于是计划自己去写一套后台的“前端框架”，之所以这个前端框架要用“”，是因为它只是把许多常用的组件经过改造拼接到一起，类似于 AdminLTE;

究极死胖兽 / 0评论 2019-12-11

前端框架Vue学习的心得记录（工具）

内容：本博客记录一些学习Vue中的心得，便于日后启发。

haohong / 0评论 2019-12-10

前端框架Vue学习的心得记录（过渡&amp;动画）

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理： 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。v-

唯美st丶 / 0评论 2019-12-08

Layui前端框架

phone:[/(^$)|^1\d{10}$/,‘请输入正确的手机号‘],identity:[/(^$)||/,‘请输入正确的身份证号‘]. <button class="layui-btn ty-btn" type="

smj000 / 0评论 2019-12-06

《基于Vue.js的Web前端应用研究》文献阅读（十五）

对比目前比较流行的React、Angular、Ploymer框架，最终选择了Vuejs框架。与其他重量级框架不同的是，Vue是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计方式，是更加灵活、开放的解决方案，架构更加简单，适合开发人员快速掌握其全部

haohong / 0评论 2019-12-01