内有图标的css圆圈[重复]
我正在努力实现如下图所示
我已经设法创建css圈与图标在它，但文字后是不符合Cirlce。
.circle {
background: #938005;
border-radius: 50%;
color: black;
display: inline-block;
height: 50px;
font-weight: bold;
font-size: 1.2em;
width: 50px;
margin: 0 auto;
}
.circle span {
display: table-cell;
vertical-align: middle;
height: 50px;
width: 50px;
text-align: center;
padding: 0 15px;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="box box-info">
<div class="box-body">
<div class="col-md-3"><span class="circle"><span><i class="fa fa-comments-o"></i></span></span> <b>Chat</b> Send Public and Private Messages</div>
</div>
</div>共有1个答案
您应该在div中换行文本，并使用displayinline-block作为
.chart{
display: inline-block;
vertical-align: top;
padding: 5px;
}
.circle {
background: #938005;
border-radius: 50%;
color: black;
display: inline-block;
height: 50px;
font-weight: bold;
font-size: 1.2em;
width: 50px;
margin: 0 auto;
}
.circle span {
display: table-cell;
vertical-align: middle;
height: 50px;
width: 50px;
text-align: center;
padding: 0 15px;
}
.chart{
display: inline-block;
vertical-align: top;
padding: 5px;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="box box-info">
<div class="box-body">
<div class="col-md-3"><span class="circle"><span><i class="fa fa-comments-o"></i></span></span>
<div class="chart">
<b>Chat</b> <div>Send Public and Private Messages</div>
</div>
</div>
</div>
</div>-
问题内容： 如何将几个元素放置在另一个元素周围的圆中，并使这些元素也都可单击链接？我希望它看起来像下面的图片，但是我不知道如何实现这种效果。 这有可能吗？ 问题答案： 是的，仅使用CSS很有可能而且非常简单。您只需要 清楚要与图像链接的角度即可 （我在末尾添加了一段代码，用于在 您悬停其中一个角度时显示它们）。 演示 您首先需要一个包装器。我将其直径设置为24em（width: 24em; hei
-
我今天的通知图标有一个奇怪的问题。 我做了什么坏事吗？ 这是我的图标图片（刚从这里下载https://material.io/icons/#ic_photo) : http://image.noelshack.com/fichiers/2016/44/1478185219-icon-notification.png 我错过什么了吗？ 作为记录，我使用的是SDK 24，目前只创建了hdpi资源文件夹
-
Highcharts 饼图 以下实例演示了半圈圆环图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 series 配置 设置 series 的 type 属性为 pie series.type 描述了数据列类型。默认值为 "line"。配置饼图大小使用 innerSize 属性并设置为innerSize: '50%'。 var serie
-
我有一个SVG计时器。有一个路径显示当前状态。但是路径重叠得很厉害，你可以在我附上的截图中看到： 这个屏幕截图的检查器的代码是： SVG的生成方式如下： 编辑：这是来自CCPROG的建议之后的计时器：
-
问题内容： 因此，我试图绘制一个标签，其中包含一个显示圆圈的图标。圆圈最初将被填充为红色，然后根据我按下的三个按钮中的哪个按钮，将使用重绘将其更改为绿色，蓝色或红色。 这是我到目前为止的内容： 我的问题是，我不知道在paintIcon中如何传递Graphics g。有其他方法可以做到这一点吗？我对此表示感谢。 问题答案： 图标的大小为（10，10）。50，超出了Icon的范围。相对于图标完成绘制，
-
我在一些项目上使用字体真棒，但我有一些事情，我想用字体真棒图标做，我可以很容易地调用这样的图标： 所有图标是否可能始终处于带边框的圆形中？像这样，我有一张照片： 使用 会产生效果，但问题是图标总是比旁边的文本或元素大，有什么解决方案吗？