如何在引导字形周围添加环 [英] How to add a ring around bootstrap glyphicons

问题描述

如何在引导字形周围添加戒指，而不使用实心圆？我看到一个例子，你只是坐在字形顶部的圆形字形，但然后你得不到正确的背景颜色，如下所示。

解决方案

这里有一个例子，

  / ** CSS FOR THE RING ** /。glyphicon-ring {width：60px; height：60px; border-radius：50％; border：4px solid white;颜色：白色; display：inline-table; text-align：center;} / ** CSS没有背景颜色的图标** /。glyphicon-ring。glyphicon-bordered {font-size：20px; vertical-align：middle; display：table-cell;} / ** with an ADDED Background COLOR ** /。glyphicon-white {background：white;颜色：黑色; border：4px solid black;}。glyphicon-teal {background：teal; color：orange;}。glyphicon-red {background：red;}  

 < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css =stylesheet/>< hr>< div class = container-fluid text-center> < div class =row> < div class =col-sm-3> < div class =alert alert-success> < div class =glyphicon-ring> < span class =glyphicon glyphicon-pencil glyphicon-bordered>< / span> < / div> < / div> < h4>透明默认值< / h4> < / div> < div class =col-sm-3> < div class =alert alert-warning> < div class =glyphicon-ring glyphicon-white> < span class =glyphicon glyphicon-pencil glyphicon-bordered>< / span> < / div> < / div> < h4>背景颜色+图标颜色+边框颜色< / h4> < / div> < div class =col-sm-3> < div class =alert alert-danger> < div class =glyphicon-ring glyphicon-red> < span class =glyphicon glyphicon-pencil glyphicon-bordered>< / span> < / div> < / div> < h4>背景颜色+默认图标颜色< / h4> < / div> < div class =col-sm-3> < div class =alert alert-info> < div class =glyphicon-ring glyphicon-teal> < span class =glyphicon glyphicon-pencil glyphicon-bordered>< / span> < / div> < / div> < h4>背景颜色+图标颜色< / h4> < / div> < / div>< / div>< hr>  

How do you add a ring around bootstrap glyphs, without using a solid circle? I have seen an example where you just sit a glyph over the top of the circle glyph, but then you don't get the correct background colour, as shown below.

解决方案

Here's an example of how to display and position an icon inside another (circle) div with modular background/color/border options.

See working Snippet.

/**CSS FOR THE RING**/

.glyphicon-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid white;
  color: white;
  display: inline-table;
  text-align: center;
}
/**CSS FOR ICON WITH NO BACKGROUND COLOR**/

.glyphicon-ring .glyphicon-bordered {
  font-size: 20px;
  vertical-align: middle;
  display: table-cell;
}
/**WITH AN ADDED BACKGROUND COLOR**/

.glyphicon-white {
  background: white;
  color: black;
  border: 4px solid black;
}
.glyphicon-teal {
  background: teal;
  color: orange;
}
.glyphicon-red {
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container-fluid text-center">
  <div class="row">
    <div class="col-sm-3">
      <div class="alert alert-success">
        <div class="glyphicon-ring"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span>

        </div>
      </div>
      <h4>Transparent Defaults</h4>

    </div>
    <div class="col-sm-3">
      <div class="alert alert-warning">
        <div class="glyphicon-ring glyphicon-white"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span>

        </div>
      </div>
      <h4>Background Color + Icon Color + Border Color</h4>

    </div>
    <div class="col-sm-3">
      <div class="alert alert-danger">
        <div class="glyphicon-ring glyphicon-red"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span>

        </div>
      </div>
      <h4>Background Color + Default Icon Color</h4>

    </div>
    <div class="col-sm-3">
      <div class="alert alert-info">
        <div class="glyphicon-ring glyphicon-teal"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span>

        </div>
      </div>
      <h4>Background Color + Icon Color</h4>

    </div>
  </div>
</div>
<hr>

这篇关于如何在引导字形周围添加环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！