字体图标使用笔记

时间 2019-12-07

标签字体图标使用笔记繁體版

原文原文链接

字体图标使用笔记：css

优缺点：

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

优势：前端

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

缺点：jquery

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

两家相对比较权威的字体图标：阿里巴巴Iconfont 和 Font Awesome跨域

字体图标的使用方法：

第一步：下载服务器

在官网下载便可。

第二步：引入工具

为了方便资源调用，尽可能将.css 和字库文件放在一个文件夹下，不要随意拆开部署，防止没法正常加载字体文件。测试

Iconfont字体

<link href="lib/iconfont/iconfont.css" rel="stylesheet" type="text/css"/>

Font Awesome网站

<link href="lib/font-awesome/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!--[if IE 7]>
<link href="lib/font-awesome/font-awesome-ie7.min.css" rel="stylesheet" type="text/css"/>
<![endif]-->

第三步：调用

有两种使用方法

方法一、挑选相应图标并获取字体编码(若是字库发生过更新，编码会发生相应的变化，须要从新获取对应编码)，应用于页面。

<i class="iconfont">󰀠</i>

方法二、经过对应的css类名调用

<i class="iconfont iconfont-yunshangchuan"></i>

字体图标的网站：

【01】官网 font awesome

http://www.bootcss.com/p/font-awesome/

【02】阿里巴巴矢量图标

http://www.iconfont.cn/

1.1 平台简介

Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个经常使用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、我的图标库管理及项目图标管理等基础功能。同时 iconfont.cn平台做为矢量图标倡导者，积极在线分享矢量图标制做经验、前端应用说明，及应用中常见的一些问题。

1.2 网页矢量图标在线生成工具

Iconfont.cn为解决设计师制做字体图标困难的问题，为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台，平台将会将图标存储在平台上，并转换成多种格式文件。

http://iconfont.cn/help/iconuse.html

iconfont 使用方法。

代码示例：

以font-awesome 举例。

使用方法：

1.引入这个.css

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

2.把font文件夹的内容放入项目中，与CSS文件夹，js文件夹同级。

3.使用网页首页的字体图标的类目便可。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>
<style>
</style>
<script>
</script>
</head>
<body>
<i class=" icon-external-link"></i>
</body>
</html>

效果：