网页引用Font Awesome图标

首先引入

方法一:将以下代码粘贴到网页HTML代码的 <head> 部分.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

方法二:复制整个 font-awesome 文件夹到您的项目中。在HTML的 <head> 中引用font-awesome.min.css。
<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">

FONTAWESOME 图标介绍(http://fontawesome.dashgame.com/)

FONTAWESOME 图标(附码表)(http://www.bootcss.com/p/font-awesome/design.html)

Font-Awesome github 项目(https://github.com/FortAwesome/Font-Awesome)


如果不需要使用Font Awesome图标默认的类,只是在CSS里面使用图标,如下图:
.icon:before {
    content: '\f006';
    font-family: FontAwesome;
}
只需要用@font-face在CSS里面加载字体就OK,加载方法如下:

@font-face使用规则
   @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }
取值说明

1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;

4、weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。

CSS中使用@font-face引入FontAwesome字体,可以参考下载的font-awesome/css目录下面的CSS文件头部(注意url)
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值