前言概述

在开发网页制作过程中通常需要一些网页小图标，前端需要PS切图，将单个小图标icon组合成CSS雪碧图过程中，需要一些时间和精力;

如果网页制作中需要的小图标icon有一套css框架库集成起来将大大提高开发效率于是就有了接下来要说的字体图标库fontAwesome、iconfont

   fontAwesome 图标字体库与CSS框架

fontAwesome 官网http://fontawesome.dashgame.com目前Font Awesome最新版本version是4.7.0

在网页中引入压缩文件font-awesome.min.css即可<link rel="stylesheet" href="css/font-awesome.min.css" />

实现如下导航菜单图标

<i class="fa fa-home fa-fw"> fa设置字体库图标大小、fa-fw设置图标宽度、fa-*(fa-home)中 *是名词;表示是图标名称

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>FontAwesome字体库图标</title>

		<link rel="stylesheet" href="css/font-awesome.min.css" />

		<link rel="stylesheet" href="css/bootstrap.css" />

	</head>

	<body>

		<div class="list-group">

		  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>  Home</a>

		  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>  Library</a>

		  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>  Applications</a>

		  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>  Settings</a>

		</div>

	</body>

</html>

fontAwesome缺点

1.若网页中就只使用若干个图标;就得将整个文件fontAwesome库下载下来;

2.fontAwesome图标库可能没有我们想要图标

设想一下 如果通过一个库，将自己网页中需要的小图标加入购物车，生成对应的字体库文件，这将是极其强大灵活的——iconfont

   强大而灵活的 iconfont 替代fontAwesome

iconfont  官网 http://www.iconfont.cn iconfont可以将我们需要的图标加入购物车，生成对应字体图标库

具体操作这里不再赘述,详细步骤请参阅http://www.tuicool.com/articles/eem2Izv

强大而灵活的字体图标替代库iconfont的更多相关文章

  1. 将svg文件化成字体图标的步骤

     一 前提摘要     有一个活就是按照需求在现有的项目中新增几个项目和修改几个项目,是很简单的,但当中遇到了一个小问题,就是tabs中图标选中和被选中的颜色问题,如果是新开发的,目前掌握的有两种办法 ...

  2. Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源

    程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解在不需要引入额外的loader的条件下运用Webp ...

  3. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  4. 移动端字体图标不显示的Bug

    用16进制编码的字体图标在部分小米机型显示不正常. 测试机型:小米1,小米1s,小米2浏览器:微信6.1内置浏览器,QQ浏览器 5.7 X5内核字体图标:不显示svg图标:显示正常 以下来自额微信内置 ...

  5. webpack热更新问题和antd design字体图标库扩展

    标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...

  6. 字体图标库 IcoMoon IconFont Font Awesome的使用

    在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...

  7. 绝对干货！！css3字体图标—丰富的阿里图标库iconfont的使用详解

    在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...

  8. css3 - 字体图标库使用方法

    一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...

  9. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

随机推荐

  1. HTML+CSS基础（2）-HTML标签的简单介绍和网页注释

    标签的语法和基本规则 1.语法"<xxx></xxx>",英文的"<>"将标签括起来,如例1. <!--例1--> ...

  2. [转]centos每天自动备份mysql数据库

    本文转自:https://www.cnblogs.com/chongchong88/p/5566645.html #!/bin/bash PATH=/bin:/sbin:/usr/bin:/usr/s ...

  3. 使用浏览器自定义协议启动本地程序(.EXE文件）

    比如,自定义协议名称为 myapp,要启动的本地程序为 myapp.exe. 1)首先向注册表添加如下内容: Windows Registry Editor Version 5.00 [HKEY_CL ...

  4. C#程序实现软件开机自动启动的两种常用方法

    C#/WPF/WinForm/.NET程序代码实现软件程序开机自动启动的两种常用方法函数的示例与实例带详细注释 方法一:将软件的快捷方式创建到计算机的自动启动目录下(不需要管理员权限) 1.必要引用 ...

  5. (10)Microsoft office Word 2013版本操作入门_word表格

    1.套用word模板  :点击[文件]---[新建]---选择合适模板创建即可. word中插入[书法字帖]: 2.插入表格 :点击[插入]---[表格]输入行和列 ,固定列宽为“自动”时 默认沾满左 ...

  6. Object类型转换成自定义类型(向下转型)

    Object类型转换成自定义类型 场景: 从数据库或者别的途径接收对象的时候用Object,但是用的时候怎么object点(方法提示 | alt+'/'),都点不出自定义类型的方法. 比如,数据库查询 ...

  7. mapreduce中文乱码，已解决

    问题: mapreduce中文乱码 原因: 再用Hadoop处理数据的时候,发现输出的时候,总是会出现乱码,这是因为Hadoop在设计编码的时候,是写死的.默认是UTF-8,所以当你处理的文件编码格式 ...

  8. CSS笔记1：属性--定位

    相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块. 元素定位 属性 版本 继承 描述 position c ...

  9. 2017-11-28 中文编程语言之Z语言初尝试: ZLOGO 4

    "中文编程"知乎专栏原文. 作者为本人. @TKT2016 开发的Z语言(ZLOGO是它的一个部分)是本人至今看到的唯一一个仍活跃开发的开源且比较完整的中文编程语言项目. 它的源码 ...

  10. 深度学习新星：GAN的基本原理、应用和走向

    深度学习新星:GAN的基本原理.应用和走向 (本文转自雷锋网,转载已获取授权,未经允许禁止转载)原文链接:http://www.leiphone.com/news/201701/Kq6FvnjgbKK ...