Font-Awesome如何引入矢量字体图标

简介: 在开发网页的过程中,我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页,但是传统的图片引用方式引入的的是图像图标,不易修改,而矢量字体图标则能很好地解决这一问题,因为矢量字体图标的本质是字体,可以使用“<style>”标签对其属性进行修改,非常方便,已经被广泛应用于网页开发中!本文主要介绍font-awesome-4.7.0的引入和使用

问题需求

在开发网页的过程中,我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页,但是传统的图片引用方式引入的的是图像图标,不易修改,而矢量字体图标则能很好地解决这一问题,因为矢量字体图标的本质是字体,可以使用“<style>”标签对其属性进行修改,非常方便,已经被广泛应用于网页开发中!本文主要介绍font-awesome-4.7.0的引入和使用


字体下载及目录上传

-font-awesome中文官网

点击进入font-awesome中文网,即可进入如下图所示界面,然后点击下载旧版v4.7按钮,下载字体压缩包然后解压为文件夹到桌面或者其他目录

e126fd4ad52e7d30bc5065b3a0814b5.png

-font-awesome目录上传

将font-awesome上传到网页服务器的目录中(ps:请上传整个目录!否则图标可能显示不出来)

6a51dfe9b714b4344f3509efd86c9fa.png


链接引用

-普通网页链接引用

在网页<head>头部引入以下链接:

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

-个人博客链接引用(以Typecho-handsome为例)

在后台外观中找到开发者设置——自定义输出head头部html代码(其他blog也类似或者直接去源代码里找!),引入以下链接

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

f9f066a572bc0b6f73003042a1f8b89.png


字体图标引用

首先按如下图操作所示,来到font-awesome官网找到图标库

f6c8557710d681d6d08a5597318c13c.png

然后点击选择一个你想要使用的字体图标,进入界面

4944b58f3c82e12a3a09f5012d66be3.png

进入改字体图标的界面后,如下图所示复制方框内的代码

a26ec63708ddc439077a3cd74ea28d9.png

最后,在所要引入字体图标处粘贴刚刚复制过的代码

4755dea8e273289bc09a6cfa00c26e4.png

最终效果如下图所示

0da3704c430cfa124008e4f650c6844.png


<style>标签修改样式

使用<Style>标签可以修改字体图标的样式,还可以进行大小等修改,在本文中,只演示颜色修改效果,其他效果可参考<Style>标签的标准用法!


502b44e15520d0b2bd904262d0be162.png

a0598166e727ac08c0b5b2857298b95.png

目录
相关文章
|
前端开发
font-awesome不显示以及字体样式的引入方式:
font-awesome不显示以及字体样式的引入方式:
734 0
font-awesome不显示以及字体样式的引入方式:
|
前端开发
CSS3中引入多种自定义字体(font-face)
CSS3中引入多种自定义字体(font-face)
468 0
CSS3中引入多种自定义字体(font-face)
|
前端开发 API
css:网页引入字体@font-face以及动态加载字体
css:网页引入字体@font-face以及动态加载字体
411 0
css:网页引入字体@font-face以及动态加载字体
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )
|
前端开发 JavaScript
CSS奇思妙想之-利用CSS裁剪(clip-path)完成各种图形
CSS奇思妙想之-利用CSS裁剪(clip-path)完成各种图形
288 1
CSS奇思妙想之-利用CSS裁剪(clip-path)完成各种图形
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1334 0
Font-Awesome4.7.0版本字体图标显示问题
|
前端开发
Font Awesome:精心打造的 Twitter Boostrap 矢量字体图标
  Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。
1216 0
|
前端开发
web前端学习(十九)——CSS3盒子模型(Box Model)、边框属性(border)及轮廓属性(outline)的相关设置
web前端学习(十九)——CSS3盒子模型(Box Model)、边框属性(border)及轮廓属性(outline)的相关设置
web前端学习(十九)——CSS3盒子模型(Box Model)、边框属性(border)及轮廓属性(outline)的相关设置
|
前端开发
把 SVG 图标对齐到文本,以告别字体图标(Font Icons)的时代
本文讲的是把 SVG 图标对齐到文本,以告别字体图标(Font Icons)的时代,在字体图标盛行的时代,推行 SVG 图标可谓是 Web 社区中的一次重要契机。毕竟,使用 SVG 图标系统能更好地遵循图形的访问性标准,并渲染出更高质量的图像。
4228 0

热门文章

最新文章