项目用到的字体图标-Font Awesome记一下

font awesome字体引用

官网

http://fontawesome.dashgame.com/

1.官网下载字体


点击下载并解压复制到项目路径下


2.在html中引用图标样式


3.开始使用图标

使用方法:标签<i></i>或者<span></span>, CSS前缀fa ,再加上图标名称

先找到某个要使用的图标,例如:address-book-o

代码中使用:

4.图标相当于字体,可以添加颜色,字体大小


下面是练习的html代码



HTML代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>font awesome图标引用</title>

    <!-- 引用Font Awesome样式 -->

    <link rel="stylesheet" href="css/font-awesome.css" >

    <style>

        .wrap{

            background: lightblue;

            min-height: 100px;

            padding: 50px;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <i class="fa fa-camera-retro fa-lg" style="color: white;"></i>

        <i class="fa fa-coffee"></i>

        <i class="fa fa-spinner fa-spin"></i>

        <span class="fa fa-address-book-o"></span>

        <span class="fa fa-address-book-o" style="color:white;font-size: 32px;"></span>

        <i class="fa fa-cc"></i>

        <i class="fa fa-github-alt"></i>

    </div>

</body>

</html>

效果显示:


以上练习结束。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,844评论 1 45
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,025评论 3 119
  • 姓名:郭珍 公司:瑾衣坊童装商贸 【日精进打卡第6天】 【知~学习】 《六项精进》阅读大钢 3遍共3遍 《大学》阅...
    一只小蝈蝈阅读 90评论 0 0
  • 其实起头是想写写如何处理害怕的感受,后来衍生到如何处理极端情绪,再到后来因为没吃晚饭饿了好一会无心工作,才想到要来...
    瑞奇叔叔阅读 138评论 0 0
  • 我内在的心理形态像极了我的母亲,母亲从小对我要求格外的严格,用她的话说把老大管好了,弟弟妹妹才能跟着学好。所以成长...
    母师征程阅读 342评论 0 5