Font Awesome图标如何引用到网页上

2024-11-23 21:12:57

Font Awesome是一套免费的、开源的、绝佳的图标字体库和CSS框架，Github为该项目提供CDN。为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

操作方法

01

Font Awesome有什么优势： Font Awesome字库，包含了与网页相关的所有形象图标（600种以上）； Font Awesome完全不依赖JavaScript，因此无需担心兼容性；无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标； Font Awesome完全免费，哪怕是商业用途；只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现。
02

如何才能将如此绝佳的Font Awesome Icons引用到自己的网页上呢？下面做详细介绍。
03

最简单的方式：BootstrapCDN （由MaxCDN提供）一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！将以下代码粘贴到网页HTML代码的 <head> 部分. <link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
04

简单方式之一：使用默认CSS 如果您使用了默认的Bootstrap CSS样式，那么你可以使用这种方式来引入默认的Font Awesome CSS样式。复制整个 font-awesome 文件夹到您的项目中。在HTML的 <head> 中引用font-awesome.min.css。 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
05

简单方式之二：LESS Ruby Gem 自行安装：$ gem install font-awesome-sass
06

进阶方式：自定义 LESS 或 SASS 将Font Awesome字体库下载到你的网站服务器中，在HTML的 <head> 中引用font-awesome，此时你就可以在任何地方以下面这种简单方式引用图标： <i class="fa fa-camera-retro"></i>
07

还可以使用 fa-border 以及 pull-right 或 pull-left、fa-spin等指令制造出旋转、边框等特效。

赞 (0)

如何在网页上添加阿里旺旺2015头像图标

首先看下图，这是一个典型的多旺旺客服专区，如何设定呢? 首先进入阿里旺旺的官方首页，地址在这里：http://im.alisoft.com/info.html?flag=3 在“功能介绍”栏目中，找到 ...
教你在网页上使用 GOOGLE WEB FONT

现时有很多网站流行使用网页字体 ,这些字体大部分来自 Google Font 提供的700+免费字体,对于网页设计师和前端人员来说,是个很棒的字体库,设计师可以使用字体库提供的免费字体来网页设计,而前 ...
如何解决网页上不能输入文字的问题

今天有网友向我们来信反映说电脑开机后，打开浏览器发现自己网页上不能输入文字怎么办。换了几个浏览器还是一样的情况，查不出病毒和插件。下面一起来看看电脑工程师是怎么解决吧！网页上无法输入字解决方法：1. ...
Word2010复制网页上的内容该如何设置自动清除超链接.图片等格式样式

我们时常会在某些网站上找一些自己想要的资料，但是许多网站上都有各种各样的格式、超链接、图片等，复制到Word里面后你会发现连同这些样式全部都粘贴到文档里面了。我们要的纯文本形式的，如果手工去除这些样式 ...
Word2010过滤网页上的超链接和图片方法

我们时常会在某些网站上找一些自己想要的资料，但是许多网站上都有各种各样的格式、超链接、图片等，复制到Word里面后你会发现连同这些样式全部都粘贴到文档里面了。我们要的纯文本形式的，如果手工去除这些样式 ...
Edge浏览器在网页上做笔记和画图的功能在哪里?

win10的Microsoft Edge浏览器可以直接在网页上做笔记,并且可以保存或者分享,本文介绍如何使用这个功能? 1.打开Edge浏览器,并且任意打开一个页面(或者打开想做笔记的页面),然后点击 ...
word2013怎样删除网页上的链接

删除网页上的链接方法一: 步骤一:点击计算机开始菜单,找到Word2013 图标,单击打开步骤二:选择右侧的空白文档, 新建一 word 文档步骤三:打开网络随意复制一段带网络连接的文字步 ...
在网页上微博怎么快速登录 ?手机微博的扫码功能在哪里?

在微博上,用户可以将看到的.听到的.想到的事情写成一句话,或发一张图片,通过电脑或者手机随时随地分享给朋友,一起分享.讨论:还可以关注朋友,即时看到朋友们发布的信息.有了微博,人们的生活朝着越来越方便 ...
用360浏览器把网页上的视频下载到本地的方法

有时候我们在浏览网页观看视频的时候,当发现一些好看的视频的时候,会想要把网页上的视频保存到本地电脑,以便今后也能观看.下面就来教大家使用360浏览器,把网页上的视频下载到本地电脑上.具体操作方法如下: ...