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

堆叠字形图标,字体很棒

  •  0
  • 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 年前
        1
  •  1
  •   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>
        2
  •  0
  •   silviagreen    9 年前

    使用posiiton:absolute怎么样?

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

    结果: jsfiddle