创建带有字体真棒图标的响应式卡片

【问题标题】：Create a responsive card with a font-awesome icon创建带有字体真棒图标的响应式卡片
【发布时间】：2021-05-13 03:35:23
【问题描述】：

我正在学习 CSS，我正在尝试使用字体很棒的图标重新创建 this website 上的卡片，例如这张卡片：

我的目标是确保它通过在调整窗口大小时隐藏图标来调整自身大小，如下所示：

我尝试过复制网站的CSS代码并适配我的，但是遇到了一个问题，看起来是这样的：

我已经想通的是如何在框变得太小时隐藏图标，但我无法弄清楚为什么图标与文本不符。这是jsfiddle 上的示例。

body {
  font-family: 'Roboto', sans-serif;
  background-color: #44484c;
}

.small-box {
  border-radius: 0.25rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
}

.small-box>.inner {
  padding: 10px;
}

.small-box>.small-box-footer {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.8);
  display: block;
  padding: 3px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  z-index: 10;
}

.small-box>.small-box-footer:hover {
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
}

.small-box h4 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  padding: 0;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .col-lg-2 .small-box h4,
  .col-md-2 .small-box h4,
  .col-xl-2 .small-box h4 {
    font-size: 1.6rem;
  }
  .col-lg-3 .small-box h4,
  .col-md-3 .small-box h4,
  .col-xl-3 .small-box h4 {
    font-size: 1.6rem;
  }
}

@media (min-width: 1200px) {
  .col-lg-2 .small-box h4,
  .col-md-2 .small-box h4,
  .col-xl-2 .small-box h4 {
    font-size: 2.2rem;
  }
  .col-lg-3 .small-box h4,
  .col-md-3 .small-box h4,
  .col-xl-3 .small-box h4 {
    font-size: 2.2rem;
  }
}

.small-box p {
  font-size: 1rem;
}

.small-box p>small {
  color: #f8f9fa;
  display: block;
  font-size: 0.9rem;
  margin-top: 5px;
}

.small-box h4,
.small-box p {
  z-index: 5;
}

.small-box .icon {
  color: rgba(0, 0, 0, 0.15);
  z-index: 0;
}

.small-box .icon>i {
  font-size: 90px;
  position: relative;
  right: 15px;
  top: 15px;
  transition: all 0.3s linear;
}

.small-box .icon>i.fa,
.small-box .icon>i.fab,
.small-box .icon>i.far,
.small-box .icon>i.fas,
.small-box .icon>i.glyphicon,
.small-box .icon>i.ion {
  font-size: 70px;
  top: 20px;
}

.small-box:hover {
  text-decoration: none;
}

.small-box:hover .icon>i {
  font-size: 95px;
}

.small-box:hover .icon>i.fa,
.small-box:hover .icon>i.fab,
.small-box:hover .icon>i.far,
.small-box:hover .icon>i.fas,
.small-box:hover .icon>i.glyphicon,
.small-box:hover .icon>i.ion {
  font-size: 75px;
}

@media (max-width: 767.98px) {
  .small-box {
    text-align: center;
  }
  .small-box .icon {
    display: none;
  }
  .small-box p {
    font-size: 12px;
  }
}

.small-box>.loading-img,
.small-box>.overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.small-box .overlay>.fa,
.small-box .overlay>.fab,
.small-box .overlay>.far,
.small-box .overlay>.fas,
.small-box .overlay>.glyphicon,
.small-box .overlay>.ion {
  color: #343a40;
}

.small-box .overlay {
  border-radius: 0.25rem;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 50;
}

.small-box .overlay.dark>.fa,
.small-box .overlay.dark>.fab,
.small-box .overlay.dark>.far,
.small-box .overlay.dark>.fas,
.small-box .overlay.dark>.glyphicon,
.small-box .overlay.dark>.ion {
  color: #343a40;
}

.small-box .overlay.dark {
  background: rgba(0, 0, 0, 0.5);
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<link href="" rel="shortcut icon" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-6">
      <div class="small-box bg-success">
        <div class="inner">
          <h4>15</h4>
          <p>Average time to login</p>
        </div>
        <div class="icon">
          <i class="fas fa-clock"></i>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js" integrity="sha512-UwcC/iaz5ziHX7V6LjSKaXgCuRRqbTp1QHpbOJ4l1nw2/boCfZ2KlFIqBUA/uRVF0onbREnY9do8rM/uT/ilqw==" crossorigin="anonymous"></script>

【问题讨论】：

  • 我看到的是最大宽度媒体查询删除了图标，但这里没有调用它。另外两个媒体查询只影响文本的大小，而不影响图标本身。我在这里错过了什么吗？
  • 我在问题中添加了更多细节并尝试清理代码（一点点）希望现在更清晰。

标签： html css bootstrap-4 font-awesome


【解决方案1】：

我没有更改您的 css，但请查看使用的 Bootstrap 类，例如“d-flex”。

body {
  font-family: 'Roboto', sans-serif;
  background-color: #44484c;
}

.small-box {
  border-radius: 0.25rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
}

.small-box>.inner {
  padding: 10px;
}

.small-box>.small-box-footer {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.8);
  display: block;
  padding: 3px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  z-index: 10;
}

.small-box>.small-box-footer:hover {
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
}

.small-box h4 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  padding: 0;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .col-lg-2 .small-box h4,
  .col-md-2 .small-box h4,
  .col-xl-2 .small-box h4 {
    font-size: 1.6rem;
  }
  .col-lg-3 .small-box h4,
  .col-md-3 .small-box h4,
  .col-xl-3 .small-box h4 {
    font-size: 1.6rem;
  }
}

@media (min-width: 1200px) {
  .col-lg-2 .small-box h4,
  .col-md-2 .small-box h4,
  .col-xl-2 .small-box h4 {
    font-size: 2.2rem;
  }
  .col-lg-3 .small-box h4,
  .col-md-3 .small-box h4,
  .col-xl-3 .small-box h4 {
    font-size: 2.2rem;
  }
}

.small-box p {
  font-size: 1rem;
}

.small-box p>small {
  color: #f8f9fa;
  display: block;
  font-size: 0.9rem;
  margin-top: 5px;
}

.small-box h4,
.small-box p {
  z-index: 5;
}

.small-box .icon {
  color: rgba(0, 0, 0, 0.15);
  z-index: 0;
}

.small-box .icon>i {
  font-size: 90px;
  position: relative;
  right: 15px;
  top: 15px;
  transition: all 0.3s linear;
}

.small-box .icon>i.fa,
.small-box .icon>i.fab,
.small-box .icon>i.far,
.small-box .icon>i.fas,
.small-box .icon>i.glyphicon,
.small-box .icon>i.ion {
  font-size: 70px;
  top: 20px;
}

.small-box:hover {
  text-decoration: none;
}

.small-box:hover .icon>i {
  font-size: 95px;
}

.small-box:hover .icon>i.fa,
.small-box:hover .icon>i.fab,
.small-box:hover .icon>i.far,
.small-box:hover .icon>i.fas,
.small-box:hover .icon>i.glyphicon,
.small-box:hover .icon>i.ion {
  font-size: 75px;
}

@media (max-width: 767.98px) {
  .small-box {
    text-align: center;
  }
  .small-box .icon {
    display: none;
  }
  .small-box p {
    font-size: 12px;
  }
}

.small-box>.loading-img,
.small-box>.overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.small-box .overlay>.fa,
.small-box .overlay>.fab,
.small-box .overlay>.far,
.small-box .overlay>.fas,
.small-box .overlay>.glyphicon,
.small-box .overlay>.ion {
  color: #343a40;
}

.small-box .overlay {
  border-radius: 0.25rem;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 50;
}

.small-box .overlay.dark>.fa,
.small-box .overlay.dark>.fab,
.small-box .overlay.dark>.far,
.small-box .overlay.dark>.fas,
.small-box .overlay.dark>.glyphicon,
.small-box .overlay.dark>.ion {
  color: #343a40;
}

.small-box .overlay.dark {
  background: rgba(0, 0, 0, 0.5);
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<link href="" rel="shortcut icon" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-6">
      <div class="small-box bg-success d-flex">
        <div class="inner col-12 col-md-6">
          <h4>15</h4>
          <p>Average time to login</p>
        </div>
        <div class="icon col-md-6 d-none d-md-flex align-items-center justify-content-end">
          <i class="fas fa-clock fa-4x"></i>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js" integrity="sha512-UwcC/iaz5ziHX7V6LjSKaXgCuRRqbTp1QHpbOJ4l1nw2/boCfZ2KlFIqBUA/uRVF0onbREnY9do8rM/uT/ilqw==" crossorigin="anonymous"></script>

【讨论】：

    【解决方案2】：

    过了一会儿找到了答案，这里是更新的css，重要的行旁边有注释。 HTML 还是一样的。

    .small-box {
  border-radius: 0.25rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
}

.small-box > .inner {
  padding: 10px;
}

.small-box h4 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  padding: 0;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .col-lg-2 .small-box h4,
  .col-md-2 .small-box h4,
  .col-xl-2 .small-box h4 {
    font-size: 1.6rem;
  }
  .col-lg-3 .small-box h4,
  .col-md-3 .small-box h4,
  .col-xl-3 .small-box h4 {
    font-size: 1.6rem;
  }
}
@media (min-width: 1200px) {
  .col-lg-2 .small-box h4,
  .col-md-2 .small-box h4,
  .col-xl-2 .small-box h4 {
    font-size: 2.2rem;
  }
  .col-lg-3 .small-box h4,
  .col-md-3 .small-box h4,
  .col-xl-3 .small-box h4 {
    font-size: 2.2rem;
  }
}
.small-box p {
  font-size: 1rem;
}
.small-box p > small {
  color: #f8f9fa;
  display: block;
  font-size: 0.9rem;
  margin-top: 5px;
}
.small-box h4,
.small-box p {
  z-index: 5;
    color: #e3e3e3;
}
.small-box .icon {
  color: rgba(0, 0, 0, 0.15);
  z-index: 0;
}
.small-box .icon > i {
  font-size: 90px;
  position: absolute; /*Main change here*/
  right: 15px;
  top: 15px;
  transition: all 0.3s linear;
}

.small-box .icon > i.fa,
.small-box .icon > i.fab,
.small-box .icon > i.far,
.small-box .icon > i.fas,
.small-box .icon > i.glyphicon,
.small-box .icon > i.ion {
  line-height: 1; /*Main change here*/
  font-size: 70px;
  top: 20px;
}
.small-box:hover {
  text-decoration: none;
}
.small-box:hover .icon > i {
  font-size: 95px;
}
.small-box:hover .icon > i.fa,
.small-box:hover .icon > i.fab,
.small-box:hover .icon > i.far,
.small-box:hover .icon > i.fas,
.small-box:hover .icon > i.glyphicon,
.small-box:hover .icon > i.ion {
  font-size: 75px;
}

*::before,
*::after {
  box-sizing: border-box;
}

@media (max-width: 767.98px) {
  .small-box {
    text-align: center;
  }
  .small-box .icon {
    display: none;
  }
  .small-box p {
    font-size: 12px;
  }
}

    【讨论】：

      猜你喜欢
      • 2023-03-08
      • 1970-01-01
      • 2017-06-09
      • 2015-07-16
      • 2013-12-06
      • 2014-01-16
      • 2021-04-06
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode