python Bootstarp框架和inconfont、font-awesome使用

http://www.bootcss.com/

http://www.runoob.com/bootstrap/bootstrap-panels.html  查找基本的没问题

https://www.cnblogs.com/clschao/articles/10387580.html     阿里云iconfont使用

http://www.fontawesome.com.cn/        fontawesome 图标库 比较全

 

大概使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="iconfontfile/iconfont.css">
    <link rel="stylesheet" href="iconfontfile/demo.css">

    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<img src="meinv.png" alt="..." class="img-rounded">
<img src="meinv.png" alt="..." class="img-circle">
<img src="meinv.png" alt="..." class="img-thumbnail">

<!--图标叉号-->
<br>
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>


<!--点赞图标-->
<div class="glyphicon glyphicon-thumbs-up" style="color:blue;font-size: 50px"></div>
<!--Bootstrap框架和inconfont、font-awesome使用-->

<span class="iconfont icon-icon_xinlang-chunselogo"></span>


<i class="fa fa-camera-retro fa-5x fa-spin"></i>
<i class="fa fa-bath"></i>


<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 关于我们</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 后台应用编辑</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系统设置</a>
</div>

<input type="text" value="&#xe65e;" class="iconfont">

<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

 

posted @ 2019-02-20 15:22  崽崽1573  阅读(251)  评论(0)  编辑  收藏  举报