Question

我有这张图片：

我尝试在HTML和CSS中使用两个字体很棒的图标。我将其中一个图标position:absolute放在另一个图标旁边。我试图绕圈但没有任何成功。有人请帮帮我。

＆＃13;

.formular {
		position: relative;
	}
	.formular a {
		text-decoration: none;
	}
	.circle .fa-caret-right {
	  font-size: 17px;
	  color: #000;
	}
	.circle {
	  position: relative;
	  border: 1px solid #CCCCCC;
	  border-radius: 50%;
	  background-color: #dce0e1;
	  padding: 5px;
	}
	.circle .fa-caret-right:first-child {
	  position: absolute;
	  left: 4px;
	}
	.circle .fa-caret-right:last-child {
	  position: relative;
	}
	.formular .text {
	  font: normal 15px 'CenturyGothic-Bold';
	  color: #028A92;
     }

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>

<body>
	<div class="formular">
		<a href="#" title="Click here">
			<span class="circle">
				<i class="fa fa-caret-right" aria-hidden="true"></i>
				<i class="fa fa-caret-right" aria-hidden="true"></i>
			</span>
			<span class="text">Ask for our forms</span>
		</a>
	</div>
</body>
</html>

＆＃13;

Answer 1

我已经改变了这个

.formular .circle {
         background: #efeded none repeat scroll 0 0;
border: 1px solid #cbcbcb;
border-radius: 50%;
color: #000;
display: inline-block;
padding: 3px 3px 3px 7px;
position: relative;
text-align: center;
}

<span class="circle">
                <i class="fa fa-forward" aria-hidden="true"></i>
                <!--<i class="fa fa-caret-right" aria-hidden="true"></i>-->
            </span>

.formular {
		position: relative;
	}
	.formular a {
		text-decoration: none;
	}
	.circle .fa-caret-right {
	  font-size: 17px;
	  color: #000;
	}
	.formular .circle {
	     background: #efeded none repeat scroll 0 0;
border: 1px solid #cbcbcb;
border-radius: 50%;
color: #000;
display: inline-block;
padding: 3px 3px 3px 7px;
position: relative;
text-align: center;
}
	}
	.circle .fa-caret-right:first-child {
	  position: absolute;
	  left: 4px;
	}
	.circle .fa-caret-right:last-child {
	  position: relative;
	}
	.formular .text {
	  font: normal 15px 'CenturyGothic-Bold';
	  color: #028A92;
     }

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>

<body>
	<div class="formular">
		<a href="#" title="Click here">
			<span class="circle">
				<i class="fa fa-forward" aria-hidden="true"></i>
				<!--<i class="fa fa-caret-right" aria-hidden="true"></i>-->
			</span>
			<span class="text">Ask for our forms</span>
		</a>
	</div>
</body>
</html>

Answer 2

你可能需要在.circle类上多填充一点，例如：

 .circle { padding: 10px }

这不是创建此按钮的最佳方式，但正如您只想要一只手，希望有所帮助。：）

你必须更多地调整圆形的形状以使其完美。

Answer 3

Css中的小变化。检查以下链接可能会帮助您

    .circle .fa-caret-right:first-child {
  position: absolute;
  left: 6px;

}
.circle .fa-caret-right:last-child {
  position: relative;
 left: 5px;
}

visit the link: https://jsfiddle.net/crxsL3qt/

两个字体很棒的箭头，一个在另一个上面，周围有一个圆圈

3 个答案: