• 网页引用Font Awesome图标


    首先引入

    方法一:将以下代码粘贴到网页HTML代码的 <head> 部分.
    [html] view plain copy
     
    1. <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。
    [html] view plain copy
     
    1. <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里面使用图标,如下图:
    [css] view plain copy
     
    1. .icon:before {  
    2.     content: 'f006';  
    3.     font-family: FontAwesome;  
    4. }  
    只需要用@font-face在CSS里面加载字体就OK,加载方法如下:
     
    @font-face使用规则
    [css] view plain copy
     
    1. @font-face {  
    2.    font-family: <YourWebFontName>;  
    3.    src: <source> [<format>][,<source> [<format>]]*;  
    4.    [font-weight: <weight>];  
    5.    [font-style: <style>];  
    6.  }  
    取值说明

    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)
    [css] view plain copy
     
    1. @font-face {  
    2.   font-family: 'FontAwesome';  
    3.   src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');  
    4.   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');  
    5.   font-weight: normal;  
    6.   font-style: normal;  
    7. }  
  • 相关阅读:
    12/21
    和寶寶在一起3/10
    11/23
    c#windows应用程序窗体间传值
    用OWC做统计图
    javascript 创建字典
    .NetCom双向数据交换的实现(RecordSet与.Net DataSet的转化)
    JScript 方法 indexOf 方法
    详尽解析window.event对象
    Window.Open详解
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/8792936.html
Copyright © 2020-2023  润新知