小编Pau*_*ula的帖子

字体真棒图标无法在CSS中用作内容

我知道SO中有很多类似的问题，但是由于某种原因，提供的答案对我不起作用。我本来要使用这个字体超棒的图标，但不会显示。当我尝试其他图标时，它们会起作用。我一直在关注本文档。

现在是这样显示的：

.input-validation-error input {
  border: 2px solid #f46262;
}

.input-validation-error input[type="text"] {
  position: relative;
}

.input-validation-error::before {
  font-family: "Font Awesome 5 Free";
  color: red;
  position: relative;
  content: "\f06a";
}

Run Code Online (Sandbox Code Playgroud)

<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<form class="registration-form">
  <div class="form-group input-validation-error">
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Nombre de usuario">
  </div>
</form>

Run Code Online (Sandbox Code Playgroud)

html5 css3 font-awesome

Pau*_*ula

lucky-day

2
推荐指数

1
解决办法

694
查看次数

引导程序 4 中的水平滚动

我正在尝试为一些用于移动视图的卡片进行水平滚动@media only screen and (max-width : 480px)。我在这里阅读了其他帖子，包括这个帖子，但似乎没有一个对我有用。我想我可能存在的问题之一是现在我的卡片叠在一起。

这就是我现在所拥有的：

这就是我需要实现的目标：

.mobile-card-container {
  display: block;
}

.card-background {
  background-color: #ffffff;
  border-radius: 6px;
  margin-top: 16px;
  height: 100px;
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="row">
  <!-- Mobile Card Container --> …

Run Code Online (Sandbox Code Playgroud)

html css horizontal-scrolling bootstrap-4

Pau*_*ula

2018 11-20

1
推荐指数

1
解决办法

7554
查看次数