如何在字体图标下添加文本？

时间：2018-09-15 16:38:06

标签： html css css3

我想做一些简单的事情，但我还不能弄清楚。我想做的是将{font}真棒图标下的文本应用于following code。由于处于“圆形”位置，这非常困难，所以我希望有人可以帮助我。

除了上述问题。如何确定圆内的位置，以便图标和文本完美居中？

.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
}

.image-anim {
    display: block;
    position: relative;
	padding-top: 66.6666%;
	@media (max-width: 768px) {
		padding-top: 100%;
	}
}

.css-menu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 10px auto 0;
  width: 100%;
  max-width: 568px;
  height: 0;
}

.css-menu > div {
	position: relative;
	margin-bottom: 250px;
	padding-bottom: 100%;
	max-width: 100%;
	height: 0;
}

.css-menu * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.css-menu input {
  position: absolute;
  display: none;
}

.css-menu .segment {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  margin-left: -48%;
  margin-top: -48%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
  transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
  transition: 0.5s ease;
}

.css-menu .curve-upper {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: 0s;
}

.css-menu .curve-lower {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-130deg) scale(0);
  transition: 0s;
}

.css-menu .curve {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: #000;
  transform-origin: left top;
  transform: rotate(0deg) skewY(45deg);
}

.css-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #567a98;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

.css-menu .segment label span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 45%;
	bottom: 25%;
	margin: auto;
	width: 40px;
	height: 60px;
	font-size: 3rem;
	font-weight: normal;
	color: #fff;
}

.css-menu .segment label:nth-of-type(1) {
	transform: rotate(-135deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(2) {
	transform: rotate(-90deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(3) {
	transform: rotate(-45deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(4) {
	transform: rotate(-0deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(5) {
	transform: rotate(45deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(6) {
	transform: rotate(90deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(7) {
	transform: rotate(135deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(8) {
	transform: rotate(180deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(1) span {
	transform: skewY(-45deg) rotate(135deg);
}

.css-menu .segment label:nth-of-type(2) span {
	transform: skewY(-45deg) rotate(90deg);
}

.css-menu .segment label:nth-of-type(3) span {
	transform: skewY(-45deg) rotate(45deg);
}

.css-menu .segment label:nth-of-type(4) span {
	transform: skewY(-45deg) rotate(0deg);
}

.css-menu .segment label:nth-of-type(5) span {
	transform: skewY(-45deg) rotate(-45deg);
}

.css-menu .segment label:nth-of-type(6) span {
	transform: skewY(-45deg) rotate(-90deg);
}

.css-menu .segment label:nth-of-type(7) span {
	transform: skewY(-45deg) rotate(-135deg);
}

.css-menu .segment label:nth-of-type(8) span {
	transform: skewY(-45deg) rotate(-180deg);
}

.css-menu .center {
	display: block;
	position: absolute;
	z-index: 200;
	left: 50%;
	top: 50%;
	margin-left: -17.5%;
	margin-top: -17.5%;
	width: 35%;
	height: 35%;
	border-radius: 50%;
	background: #000;
	overflow: hidden;
	box-shadow: 0 0 0 2px #fff;
}

.css-menu .holder .segment {
	transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
	transition: 0.5s ease;
	transform: scale(1);
}

.css-menu .holder .center {
	transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
	transition: 0.5s ease;
	transform: scale(1.2);
}

.css-menu .holder .curve-upper {
	transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
	transition: 1s ease;
	transform: scale(1);
}

.css-menu .holder .curve-lower {
	transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
	transition: 1s ease;
	transform: rotate(-135deg) scale(1);
}

.css-menu #c1:checked ~ .holder .segment label:nth-of-type(1),
.css-menu #c2:checked ~ .holder .segment label:nth-of-type(2),
.css-menu #c3:checked ~ .holder .segment label:nth-of-type(3),
.css-menu #c4:checked ~ .holder .segment label:nth-of-type(4),
.css-menu #c5:checked ~ .holder .segment label:nth-of-type(5),
.css-menu #c6:checked ~ .holder .segment label:nth-of-type(6),
.css-menu #c7:checked ~ .holder .segment label:nth-of-type(7),
.css-menu #c8:checked ~ .holder .segment label:nth-of-type(8) {
	background: #45acea;
}

.css-menu #c1:checked ~ #toggle:checked ~ .holder .curve-lower {
	transform: rotate(-135deg)
}

.css-menu #c2:checked ~ #toggle:checked ~ .holder .curve-lower {
	transform: rotate(-90deg)
}

.css-menu #c3:checked ~ #toggle:checked ~ .holder .curve-lower {
	transform: rotate(-45deg)
}

.css-menu #c4:checked ~ #toggle:checked ~ .holder .curve-lower {
	transform: rotate(0deg)
}

.css-menu #c5:checked ~ #toggle:checked ~ .holder .curve-lower {
	transform: rotate(45deg)
}

.css-menu #c6:checked ~ #toggle:checked ~ .holder .curve-lower {
	transform: rotate(90deg)
}

.css-menu #c7:checked ~ #toggle:checked ~ .holder .curve-lower {
	transform: rotate(135deg)
}

.css-menu #c8:checked ~ #toggle:checked ~ .holder .curve-lower {
	transform: rotate(180deg)
}

.css-eye {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 150px;
	background-color: white;
	border:0.04em solid black;
	border-radius: 50%;
	position: relative;
	box-shadow: 0.03em 0.14em rgba(0,0,0,0.1);
	z-index:205;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<figure class="image-anim">
<div class="screen">
  <div class="css-menu">
    <div>
    <input type="radio" id="c1" name="segment" checked>
    <input type="radio" id="c2" name="segment">
    <input type="radio" id="c3" name="segment">
    <input type="radio" id="c4" name="segment">
    <input type="radio" id="c5" name="segment">
    <input type="radio" id="c6" name="segment">
    <input type="radio" id="c7" name="segment">
    <input type="radio" id="c8" name="segment">
    <input type="checkbox" id="toggle" checked="checked">
    <div class="holder">
      <div class="segment">
      <label for="c1"><span class="fab fa-android"></span></label>
      <label for="c2"><span class="fab fa-android"></span></label>
      <label for="c3"><span class="fab fa-android"></span></label>
      <label for="c4"><span class="fab fa-android"></span></label>
      <label for="c5"><span class="fab fa-android"></span></label>
      <label for="c6"><span class="fab fa-android"></span></label>
      <label for="c7"><span class="fab fa-android"></span></label>
      <label for="c8"><span class="fab fa-android"></span></label>
      </div>
      <div class="curve-lower">
      <div class="curve"></div>
      </div>
      <div class="curve-upper"></div>
      <div class="center">
      <div class="css-eye"</div>
      </div>
    </div>
    </div>
    </div>
  </div>
</div>
</figure>

1 个答案:

答案 0 :(得分：1)

这是我的解决方法，

基本上，我将data-label="Android"添加到了.fab图标类中，并使用了

 content: attr(data-label);

将文本添加到after类的.fab 

.fab:after{
    content: attr(data-label);
    display: block;
    font-family: inherit;
    font-size: 16px;
    width: 100px;
    margin-top: 5px;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

将标签文本添加到图标

.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
}

.image-anim {
  display: block;
  position: relative;
  padding-top: 66.6666%;
  @media (max-width: 768px) {
    padding-top: 100%;
  }
}

.css-menu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 10px auto 0;
  width: 100%;
  max-width: 568px;
  height: 0;
}

.css-menu>div {
  position: relative;
  margin-bottom: 250px;
  padding-bottom: 100%;
  max-width: 100%;
  height: 0;
}

.css-menu * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.css-menu input {
  position: absolute;
  display: none;
}

.css-menu .segment {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  margin-left: -48%;
  margin-top: -48%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
  transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
  transition: 0.5s ease;
}

.css-menu .curve-upper {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: 0s;
}

.css-menu .curve-lower {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-130deg) scale(0);
  transition: 0s;
}

.css-menu .curve {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: #000;
  transform-origin: left top;
  transform: rotate(0deg) skewY(45deg);
}

.css-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #567a98;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

.css-menu .segment label span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 45%;
  bottom: 25%;
  margin: auto;
  width: 40px;
  height: 60px;
  font-size: 3rem;
  font-weight: normal;
  color: #fff;
}

.css-menu .segment label:nth-of-type(1) {
  transform: rotate(-135deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(2) {
  transform: rotate(-90deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(3) {
  transform: rotate(-45deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(4) {
  transform: rotate(-0deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(5) {
  transform: rotate(45deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(6) {
  transform: rotate(90deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(7) {
  transform: rotate(135deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(8) {
  transform: rotate(180deg) skewY(45deg);
}

.css-menu .segment label:nth-of-type(1) span {
  transform: skewY(-45deg) rotate(135deg);
}

.css-menu .segment label:nth-of-type(2) span {
  transform: skewY(-45deg) rotate(90deg);
}

.css-menu .segment label:nth-of-type(3) span {
  transform: skewY(-45deg) rotate(45deg);
}

.css-menu .segment label:nth-of-type(4) span {
  transform: skewY(-45deg) rotate(0deg);
}

.css-menu .segment label:nth-of-type(5) span {
  transform: skewY(-45deg) rotate(-45deg);
}

.css-menu .segment label:nth-of-type(6) span {
  transform: skewY(-45deg) rotate(-90deg);
}

.css-menu .segment label:nth-of-type(7) span {
  transform: skewY(-45deg) rotate(-135deg);
}

.css-menu .segment label:nth-of-type(8) span {
  transform: skewY(-45deg) rotate(-180deg);
}

.css-menu .center {
  display: block;
  position: absolute;
  z-index: 200;
  left: 50%;
  top: 50%;
  margin-left: -17.5%;
  margin-top: -17.5%;
  width: 35%;
  height: 35%;
  border-radius: 50%;
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 0 2px #fff;
}

.css-menu .holder .segment {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1);
}

.css-menu .holder .center {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1.2);
}

.css-menu .holder .curve-upper {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: scale(1);
}

.css-menu .holder .curve-lower {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: rotate(-135deg) scale(1);
}

.css-menu #c1:checked~.holder .segment label:nth-of-type(1),
.css-menu #c2:checked~.holder .segment label:nth-of-type(2),
.css-menu #c3:checked~.holder .segment label:nth-of-type(3),
.css-menu #c4:checked~.holder .segment label:nth-of-type(4),
.css-menu #c5:checked~.holder .segment label:nth-of-type(5),
.css-menu #c6:checked~.holder .segment label:nth-of-type(6),
.css-menu #c7:checked~.holder .segment label:nth-of-type(7),
.css-menu #c8:checked~.holder .segment label:nth-of-type(8) {
  background: #45acea;
}

.css-menu #c1:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-135deg)
}

.css-menu #c2:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-90deg)
}

.css-menu #c3:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-45deg)
}

.css-menu #c4:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(0deg)
}

.css-menu #c5:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(45deg)
}

.css-menu #c6:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(90deg)
}

.css-menu #c7:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(135deg)
}

.css-menu #c8:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(180deg)
}

.css-eye {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 150px;
  background-color: white;
  border: 0.04em solid black;
  border-radius: 50%;
  position: relative;
  box-shadow: 0.03em 0.14em rgba(0, 0, 0, 0.1);
  z-index: 205;
}

.fab:after{
    content: attr(data-label);
    display: block;
    font-family: inherit;
    font-size: 16px;
    width: 100px;
    margin-top: 5px;
    /* text-indent: -5px; */
    /* min-width: 42px; */
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* background-color: #b54f4f; */
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<figure class="image-anim">
  <div class="screen">
  <div>
    <div class="css-menu">
      <div>
        <input type="radio" id="c1" name="segment" checked>
        <input type="radio" id="c2" name="segment">
        <input type="radio" id="c3" name="segment">
        <input type="radio" id="c4" name="segment">
        <input type="radio" id="c5" name="segment">
        <input type="radio" id="c6" name="segment">
        <input type="radio" id="c7" name="segment">
        <input type="radio" id="c8" name="segment">
        <input type="checkbox" id="toggle" checked="checked">
        <div class="holder">
          <div class="segment">
            <label for="c1"><span class="fab fa-android" data-label="Android"></span> </label>
            <label for="c2"><span class="fab fa-android" data-label="Apple"></span></label>
            <label for="c3"><span class="fab fa-android" data-label="Some text"></span></label>
            <label for="c4"><span class="fab fa-android" data-label="Android"></span></label>
            <label for="c5"><span class="fab fa-android" data-label="Other text"></span></label>
            <label for="c6"><span class="fab fa-android" data-label="Android"></span></label>
            <label for="c7"><span class="fab fa-android" data-label="Nonsense"></span></label>
            <label for="c8"><span class="fab fa-android" data-label="Text"></span></label>
          </div>
          <div class="curve-lower">
            <div class="curve"></div>
          </div>
          <div class="curve-upper"></div>
          <div class="center">
            <div class="css-eye" >
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</figure>

相关问题
最新问题