Question

我有一个:: before伪类，它调用图像并通过content属性添加文本。但是图标太大了。我该如何调整大小？

我目前坚持使用以下代码，其中没有任何px属性有效：

＆＃13;

.parentcategory3::before {
  content: url(https://unsplash.it/18) ' text that follows:';
  background-size: 100px !important;
  width: 100px !important;
  height: 100px !important;
  visibility: visible;
}

＆＃13;

<div class="more_info parentcategory3">
  <span class="checkbox" style=""></span>
</div>

＆＃13;

我搜索过但总是得到同样的建议。

有没有人知道如何解决这个问题？

如果不可能有办法添加字体真棒图标（同时保留图标后面的文字！）？

非常感谢提前!!

Answer 1

您需要至少设置inline-block元素，以便指定宽度和高度。

然后，如果您想使用FontAwesome，您可以直接将图标代码添加到内容中，并使用font-size来定义图标+文本的大小。

您可以查看this link以查找所需图标的代码。

.parentcategory3::before {
  content: "\f007 text that follows:";
  font-family:fontAwesome;
  font-size:18px;
  width: 100px ;
  height: 100px ;
  display:inline-block;
  border:1px solid;
  visibility: visible;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="more_info parentcategory3">
  <span class="checkbox" style=""></span>
</div>

Answer 2

如果我正确地阅读了您的问题，您最好的选择可能是将图片加载为背景图片，如@Temani originally suggested。然后调整background-size和padding-left值以满足您的需求。

＆＃13;

.first::before {
  content: 'text that follows 1';
  background: url(https://unsplash.it/18) left center no-repeat;
  vertical-align: middle;
  background-size: 16px auto;
  padding-left: 20px;
}

.second::before {
  content: 'text that follows 2';
  background: url(https://unsplash.it/18) left center no-repeat;
  vertical-align: middle;
  background-size: 12px auto;
  padding-left: 16px;
}

＆＃13;

<div class="first"></div>

<div class="second"></div>

＆＃13;

Answer 3

您可以尝试缩放属性以使图像变大和变小吗？例如：

.parentcategory3::before {
  content: url(https://picsum.photos/150) ' text that follows:';
  zoom:50%;
  background-size: 100px !important;
  width: 100px !important;
  height: 100px !important;
  visibility: visible;
  display: block;
}

如何从CSS中的内容属性调整图像大小

3 个答案: