zoukankan      html  css  js  c++  java
  • AwesomeFont及伪元素混合应用方法汇编

    1.第一种方法:引入css,或者cdn css或者本地css

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Pseudo Element</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
    </head>
    <body>
    <p><span class="fa">&#xf1ac</span>11111111111111</p>
    <p><i class="fa fa-fax"></i>11111111111111</p>
    </body>
    </html>

    2.第二种方法:

    首先做一个css文件,假设文件名为:fontCss.css

    @charset "utf-8";
    /* CSS Document */
    @font-face{
        font-family:"fontawesome";
        src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.eot);
        src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.woff);
        src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.svg);
        src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.ttf);
        src:url(font-awesome-4.7.0/fonts/fontawesome-webfont.woff2);
        src:url(font-awesome-4.7.0/fonts/FontAwesome.otf);
    }

    然后,把上述的css文件引入到下方的html文件中,

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Pseudo Element</title>
    <link rel="stylesheet" type="text/css" href="fontCss.css">
    <style type="text/css">
    p:before {
      content: "f1ac";
      font-family:fontawesome;  
    }
    .myfont{
         font-family:fontawesome;  
    }
    </style>
    </head>
    <body>
    <p>11111111111111</p>
    <div class="myfont">&#xf1ac</div>
    </body>
    </html>
  • 相关阅读:
    android布局几点随想
    android_handler(一)
    android surfaView surfaHolder video 播放
    java_synchronized 用法
    android_viewFlipper(一)
    android_handler(二)
    解析pdf文档 (lucene3.5)
    Lucene 搜索(小程序)(Lucene3.5)
    运算符重载(++,<<,>>Data类的重载)
    线程池小程序(Java)
  • 原文地址:https://www.cnblogs.com/exesoft/p/12846471.html
Copyright © 2011-2022 走看看