网页CSS样式引用Font Awesome图标

  • A+
所属分类:Html

首先引入

方法一:将以下代码粘贴到网页HTML代码的 <head> 部分.
方法二:复制整个 font-awesome 文件夹到您的项目中。在HTML的 <head> 中引用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里面使用图标,如下图:
只需要用@font-face在CSS里面加载字体就OK,加载方法如下:
 
@font-face使用规则

取值说明

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)
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: