创建带有 font-awesome 图标的响应式卡片

Question

我正在学习 CSS 并且正在尝试在 this website using font-awesome icons, for example this card:

上重新创建卡片

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

我试图复制网站的 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>

Answer 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>

Answer 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;
  }
}

创建带有 font-awesome 图标的响应式卡片

Create a responsive card with a font-awesome icon

html

css

font-awesome

bootstrap-4