前言： 很多前端新手在仿一些大型网站的时候经常遇到一个问题：该网站使用了图标字体——iconfont，虽然现在阿里有开源的iconfont库，但是还是没有原网站的效果（本人强迫症但非处女座）。所以此文章介绍一下如何获取和使用网站的iconfont，该技术仅供学习交流，请勿用于任何商业行为。 工具： ...
分类：
Web程序 时间：
2018-03-21 16:34:04
阅读次数：
679
## 0. 前言 比较基础的图标加载：<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时，使用雪碧图（多个png压缩成一个png，定位来使用），减少图片所占空间。 大屏显示，为保证图标清晰度，可以使用svg格式的图片。svg是矢量图，直接 ...
分类：
Web程序 时间：
2018-03-10 15:58:17
阅读次数：
182
本文为原创文章，转载请标明 "出处" 目录 1. 使用 videogular2 安装 增加图标、字体支持 导入 module 举个例子 2. 遇到的问题 iOS 端自动进入全屏播放 Android 端 autoplay 不起作用 3. 更多 1. 使用 videogular2 安装 终端运行: 增 ...
分类：
其他好文 时间：
2018-02-04 21:15:17
阅读次数：
523
在自己写项目的时候经常会涉及到页面的布局，还有图标字体的使用。当时发现了iconfont这个神奇，恰好有个小姐姐说也想学一学，所以写一篇这个博文推荐给大家。 iconfont官网传送门：http://www.iconfont.cn/ 下面进入正题： 第1步 进入百度，输入 iconfont.然后点进 ...
分类：
其他好文 时间：
2017-12-31 21:04:36
阅读次数：
3788
技术栈：Vue.js 基础：HTML，CSS，JS，ES6 涉及： vue-resource：前后端数据交互 vue-router：前端单页应用 1.better-scroll库：第三方数据库，最大程度组件化，复用功能 2.html5 localstorage：收藏功能 3.图标字体 4.1像素边距 ...
分类：
其他好文 时间：
2017-12-25 15:08:20
阅读次数：
132
1.webpack安装相关依赖 2.配置webpack.config.js 3.入口文件引入 4.打包后生成的图标字体 5.显示结果如下： 详情请参考：http://fontawesome.io/ ...
分类：
Web程序 时间：
2017-12-23 14:29:12
阅读次数：
248
Font Awesome 图标 Font Awesome 是一套绝佳的图标字体库和CSS框架。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： 国内推荐 CDN... ...
分类：
其他好文 时间：
2017-12-21 17:16:00
阅读次数：
154
Font Awesome 图标 Font Awesome 是一套绝佳的图标字体库和CSS框架。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： 国内推荐 CDN... ...
分类：
其他好文 时间：
2017-12-21 17:13:09
阅读次数：
187
做过Web前端开发的一定对Font Awesome不会陌生，Font Awesome号称是为Bootstrap设计的完美图标字体，经常出现在各类网页中，非常流行。 这么好的资源，能不能在Qt应用程序中使用呢？答案是肯定的。而且使用起来非常简单。 1. 先来了解下 Font Awesome 的一些特性 ...
分类：
其他好文 时间：
2017-12-17 15:58:05
阅读次数：
1640
一、图标字体的优劣势 优势： 1、轻量性：一个图标字体比一系列的图像要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。 2、灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、H ...
分类：
其他好文 时间：
2017-12-07 21:09:20
阅读次数：
184
