代码之家 › 专栏 › 技术社区 › user5406531

堆叠字形图标,字体很棒

glyphicons css

user5406531 · 技术社区 · 9 年前

我有 fa-circle-thin 我想在其中放置一个字形图标,这样看起来我的字形图标周围有一个圆形边框。我只是想知道这是否可能?

我试过以下几点:

        <div class="col-md-4">
            <span class="circle">
                <i class="glyphicon glyphicon-star"></i>
            </span>
            <h4 class="service-heading">Lorem</h4>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        </div>

然而,这两个图标并排显示。我给我的足总上了一节课,看起来是这样的:

.circle:before {
    font-family: fontawesome-webfont;
    text-decoration: none;
    content: "\f1db";
    background-color: transparent;
    z-index:-1;
}

2 回复 | 直到 9 年前

André Dion 9 年前

我就用 border-radius: 50% 而不是尝试定位两个字形(另外,您可以设置边框样式!)。我也在集中精力 text-align: center 通过匹配 line-height 和 height 值:

.circle {
  border: 1px solid black;
  border-radius: 50%;
  padding: 3px;
  width: 25px;
  height: 25px;
  display: inline-block;
  text-align: center;
  line-height: 25px;
}

.alt {
    border-width: 2px;
    border-color: red;
    color: red;
    width: 15px;
    height: 15px;
    line-height: 15px;
}

<div class="circle">
  ð
</div>

<div class="circle alt">
  ð
</div>

silviagreen 9 年前

使用posiiton:absolute怎么样?

.glyphicon{
  position: absolute;
  top: 3px;
  left: 15px;
}

结果: jsfiddle

推荐文章

gdel · 附加到另一个字段的下拉列表中的Yii2表单字段

7 年前

tony gil · 单击一次即可更改多个字形图标

7 年前

user5406531 · 堆叠字形图标,字体很棒

9 年前

Tom McDonough · 你能在ASP经典页面上使用字形图标吗?

9 年前

Pradeepkumar Guruswamy · 我在哪里可以得到字体很棒的水果和蔬菜图标?[已关闭]

9 年前

Igor Biryukov · rails glyph图标未在生产中上载

9 年前

feradz · 使用CSS在glyph图标或字体真棒图标上绘制斜线

10 年前

JoanieBrar · 如何设置字形图标内部的样式?

10 年前

Amiga500 · 引导css仅使用glyph图标

11 年前

Orahmax · 引导图标未显示?

11 年前