zoukankan      html  css  js  c++  java
  • Font Awesome 一套绝佳的图标字体库和CSS框架

    在bootstrap框架的使用中,字体图标必不可少,Font Awesome 一套绝佳的图标字体库和CSS框架,值得学习。

    网址:http://fontawesome.dashgame.com/

    图片.png

    使用示例

    1:引入Font Awesome图标文件或者使用使用LESS或SASS的方法来自定义 Font Awesome 4.7.0 。

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    

    您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ,因为它更简洁。 但实际上使用 <span> 才能更加语义化。

    代码示例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"> 
        <title>Bootstrap 实例 font-awesome图标</title>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="list-group">
      <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp;主页</a>
      <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; 图书馆</a>
      <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; 提交申请</a>
      <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; 设置</a>
    </div>
    
    </body>
    </html>
    

    效果如下

    原文作者:祈澈姑娘
    技术博客:https://www.jianshu.com/u/05f416aefbe1

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

    关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。公众号回复“1”,拉你进程序员技术讨论群
  • 相关阅读:
    WPF:linq
    WPF:ListView数据绑定及Style
    WPF: DatePicker
    多线程16--单例--懒汉模式和静态内部类形
    多线程15--线程本地变量ThreadLocal
    多线程14---模拟消息队列
    多线程13--多线程并发购票--低效的线程安全的车票容器
    多线程10--线程间实时通信--耗性能的轮询
    自定义video的controls(播放暂停按钮、进度条、快进快退等)
    js+css 写出 简单2048游戏
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701432.html
Copyright © 2011-2022 走看看