Font-Awesome最新版完整使用教程

何为Font-Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

简言之:可伸缩的图标(矢量化),高度自定义(大小,颜色,阴影等)


优势

  1. 目前图标总数共有519个;
  2. 不依赖Javascript
  3. 矢量图形,无限缩放
  4. 免费,可用于商业
  5. CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果
  6. 支持retina显示(苹果retina 屏幕)
  7. 源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架
  8. 兼容屏幕阅读器
  9. 图标用到的animation适用于IE8~9

缺点

  • 不兼容IE7(不过现在用户使用主流浏览器都慢慢过渡到较新的..所以也不算奇葩)

获取Font-Awesome

  • 官网 — 点击Download即可下载最新版本
  • Github — Font-Awesome仓库

使用方法

本地使用

下载完毕[font-awesome-4.3.0.zip]解压文件包括以下几个文件夹:

  • CSS — 字体的引入,图标基础样式,大小等
  • fonts — CSS需要引用字体文件夹,本地用户需要安装内部的fontawesome-webfont.ttf(CSS引入字体)
  • less — 各种参数自定义的less文件,用来自定义Font awesome
  • sass — 各种参数自定义的sass文件,用来自定义Font awesome

SASS和LESS都是CSS预处理器

把CSS文件夹和fonts复制到网站根目录(记得安装字体)即可使用,具体看代码示例
代码内含注释—应该很好理解
建议:用Chrome F12调试,一边查看注释一边折腾更妙


index.html


<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Font-Awesome完整教程title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    

    <style>
      * {
        outline: 0px;
        border: 0px;
        margin: 0px;
        padding: 0px;
      }

      div {
        border: 2px solid #882BEF;
        margin: 30px;
        width: 500px;
        height: auto;
      }

      ul {
        list-style: none;
      }

      div {
        border: 2px solid #882BEF;
        margin: 30px;
        width: 500px;
        height: auto;
      }

      .extraHeight {
        height: 400px;
      }

      .extraHeight ul li {
        margin: 10px auto;
      }
      --啊咧,这上面所有样式只是让效果显示排版一下而增加的-->
    style>
  head>

  <body>
    <div class="icon-test-list">
      <h1>图标基础样式h1>
      <ul>
        <li><i class="fa fa-weixin">i>微信li>
        <li><i class="fa fa-whatsapp">i>whatsappli>
        <li><i class="fa fa-youtube">i>youtubeli>
        <li><i class="fa fa-weibo">i>新浪微博li>
      ul>
    div>
    <div class="icon-test-list">
      <h1>图标规格样式h1>
      <span>span>
      <ul>
        <li><i class="fa fa-weixin ">i>微信li>
        <li><i class="fa fa-weixin fa-lg">i>微信lgli>
        <li><i class="fa fa-weixin fa-2x">i>微信li>
        <li><i class="fa fa-weixin fa-3x">i>微信3xli>
        <li><i class="fa fa-weixin fa-4x">i>信4xli>
        <li><i class="fa fa-weixin fa-5x">i>微信5xli>
      ul>
    div>
    

    <div class="icon-test-list">
      <h1>图标固定大小h1>
      <ul>
        <li><i class="fa fa-fw fa-weixin">i>微信li>
        <li><i class="fa fa-fw fa-whatsapp">i>whatsappli>
        <li><i class="fa fa-fw fa-youtube">i>youtubeli>
        <li><i class="fa fa-fw fa-weibo">i>新浪微博li>
      ul>
    div>
    

    <div class="icon-test-list extraHeight">
      <h1>图标边框及图标移动h1>
      <ul>
        <li><i class="fa fa-tag  pull-right">i>这是一句测试的文字,图标定位在右边li>
        <li><i class="fa fa-tag fa-2x pull-left ">i>
          <p>图标没有边框,图标在左边,图标2x[这是填充文字这是填充文字这是填充文字这是填充文字]p>
        li>
        <li><i class="fa fa-search fa-3x pull-right fa-border">i>
          <p>我的图标三倍大小,内容在右边,且图标有边框[这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字]p>
        li>
      ul>
    div>
    


    <div class="icon-test-list">
      <h1>图标动画h1>
      <ul>
        <li><i class="fa fa-spin fa-2x  fa-arrow-right">i> fa-arrow-right-匀速旋转,2s一圈li>
        <li><i class="fa fa-spin fa-2x fa-spinner fa-pulse">i>fa-spinner--一圈分为八次转完,时间1Sli>
      ul>
    div>

    
    <div class="icon-test-list">
      <h1>图标旋转h1>
      <ul>
        <li><i class="fa fa-hand-o-up  ">i>手:默认状况li>
        <li><i class="fa fa-hand-o-up fa-rotate-90 ">i>手:旋转90度li>
        <li><i class="fa fa-hand-o-up fa-rotate-180 ">i>手:旋转180度li>
        <li><i class="fa fa-hand-o-up fa-rotate-270">i>手:旋转270度li>
        <li><i class="fa fa-hand-o-up fa-flip-horizontal ">i>手:水平(90%)li>
        <li><i class="fa fa-hand-o-up fa-flip-vertical ">i>手:垂直(180%)li>
      ul>
    div>
    

    <div class="icon-test-lise">
      <h1>堆叠图标:合并图形h1>
      <ul>
        <li>
          <span class="fa-stack">
            <i class="fa fa-stack-2x  fa-bookmark-o">i>
            <i class="fa fa-stack-1x  fa-child">i>
          span>随便找的两个图标合成
        li>
        <li>
          <span class="fa-stack">
            <i class="fa fa-stack-2x  fa-lemon-o">i>
            <i class="fa fa-stack-1x  fa-chain ">i>
          span>随便找的两个图标合成
        li>
        <li>
          <span class="fa-stack">
            <i class="fa fa-stack-2x fa-wheelchair">i>
            <i class="fa fa-stack-1x fa-transgender-alt">i>
          span>随便找的两个图标合成
        li>
        <li>
          <span class="fa-stack fa-2x">
            <i class="fa fa-stack-1x  fa-comment">i>
            <i class="fa fa-stack-2x  fa-linux">i>
          span>随便找的两个图标合成
        li>
        <li>
          <span class="fa-stack fa-3x">
            <i class="fa fa-stack-1x   fa-chain">i>
            <i class="fa fa-stack-2x  fa-circle-o ">i>
          span>随便找的两个图标合成
        li>
        <li>
          <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x">i>
              <i class="fa fa-flag fa-stack-1x fa-inverse">i>
            span>随便找的两个图标合成
        li>
      ul>
    div>
    
  body>

html>

CND引用AweSome(推荐)

只要把head内引用本地awesome的位置改下即可

<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

图标大全

  • Font Awesome — 图标有分类,带搜索功能
  • Font Awesome Cheatsheet — 图标汇总表

你可能感兴趣的:(font-awsom,aswsome教程,font引入,免费字体集,免费图标大全)