Icons are not showing up - html

Question

On "Codepen.io" I've found a nice CSS for a circle menu which I would like to use. (https://codepen.io/oliver_merz/pen/zqXZQG). But as you can see the labels (buttons) are empty. There should be images in it. I've tested this with a random image (https://image.flaticon.com/icons/svg/771/771605.svg). Unfortunately, nothing shows up..
It's about the following CSS code:
.cssplay-menu .segment label {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
background: #008080;
border: 1px solid #fff;
cursor: pointer;
transform-origin: left top;
transition: 0.25s cubic-bezier(0, 0, 1, 1);
transition: 0.25s ease;
}

Answer 1

You need to adjust some CSS to make them visible because actually they are hidden:
.cssplay-menu .segment label span {
display: block;
position: absolute;
left: 0;
top: 0;
right: 50%; /*changed*/
bottom: 10%; /*changed*/
margin: auto;
width: 35px;
height: 35px;
background-position: center center;
background-repeat: no-repeat;
}
Full code
.cssplay-menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
margin: 20px auto 0;
width: 100%;
max-width: 568px;
height: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transform: translate3d(0, 0, 0);
}
.cssplay-menu > div {
position: relative;
margin-bottom: 250px;
padding-bottom: 100%;
max-width: 100%;
height: 0;
}
.cssplay-menu * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cssplay-menu .holder {
position: relative;
padding-bottom: 100%;
max-width: 100%;
height: 0;
overflow: hidden;
}
.cssplay-menu input {
position: absolute;
display: none;
}
.cssplay-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;
}
.cssplay-menu .curve-upper {
position: absolute;
left: 1%;
top: 1%;
width: 98%;
height: 98%;
background: #fff;
border-radius: 50%;
transform: scale(0);
transition: 0s;
}
.cssplay-menu .curve-lower {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
transform: rotate(-140deg) scale(0);
transition: 0s;
}
.cssplay-menu .curve {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
background: #8b0000;
transform-origin: left top;
transform: rotate(0deg) skewY(50deg);
}
.cssplay-menu .segment label {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
background: #008080;
border: 1px solid #fff;
cursor: pointer;
transform-origin: left top;
transition: 0.25s cubic-bezier(0, 0, 1, 1);
transition: 0.25s ease;
}
.cssplay-menu .segment label span {
display: block;
position: absolute;
left: 0;
top: 0;
right: 50%;
bottom: 10%;
margin: auto;
width: 35px;
height: 35px;
background:url(https://image.flaticon.com/icons/svg/771/771605.svg);
background-position: center center;
background-repeat: no-repeat;
}
.cssplay-menu .segment label:nth-of-type(1) {
transform: rotate(-140deg) skewY(50deg);
}
.cssplay-menu .segment label:nth-of-type(2) {
transform: rotate(-100deg) skewY(50deg);
}
.cssplay-menu .segment label:nth-of-type(3) {
transform: rotate(-60deg) skewY(50deg);
}
.cssplay-menu .segment label:nth-of-type(4) {
transform: rotate(-20deg) skewY(50deg);
}
.cssplay-menu .segment label:nth-of-type(5) {
transform: rotate(20deg) skewY(50deg);
}
.cssplay-menu .segment label:nth-of-type(6) {
transform: rotate(60deg) skewY(50deg);
}
.cssplay-menu .segment label:nth-of-type(7) {
transform: rotate(100deg) skewY(50deg);
}
.cssplay-menu .segment label:nth-of-type(8) {
transform: rotate(140deg) skewY(50deg);
}
.cssplay-menu .segment label:nth-of-type(9) {
transform: rotate(180deg) skewY(50deg);
}
.cssplay-menu .segment label:nth-of-type(1) span {
transform: skewY(-50deg) rotate(0deg);
}
.cssplay-menu .segment label:nth-of-type(2) span {
transform: skewY(-50deg) rotate(-40deg);
}
.cssplay-menu .segment label:nth-of-type(3) span {
transform: skewY(-50deg) rotate(-80deg);
}
.cssplay-menu .segment label:nth-of-type(4) span {
transform: skewY(-50deg) rotate(-120deg);
}
.cssplay-menu .segment label:nth-of-type(5) span {
transform: skewY(-50deg) rotate(-160deg);
}
.cssplay-menu .segment label:nth-of-type(6) span {
transform: skewY(-50deg) rotate(-200deg);
}
.cssplay-menu .segment label:nth-of-type(7) span {
transform: skewY(-50deg) rotate(-240deg);
}
.cssplay-menu .segment label:nth-of-type(8) span {
transform: skewY(-50deg) rotate(-280deg);
}
.cssplay-menu .segment label:nth-of-type(9) span {
transform: skewY(-50deg) rotate(-320deg);
}
.cssplay-menu .center {
display: block;
position: absolute;
z-index: 200;
left: 50%;
top: 50%;
margin-left: -20%;
margin-top: -20%;
width: 40%;
height: 40%;
border-radius: 50%;
background: #8b0000 url(cubic/settings.png) no-repeat center center;
overflow: hidden;
cursor: pointer;
box-shadow: 0 0 0 2px #fff;
}
.cssplay-menu #toggle:checked + .holder .segment {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 0.5s ease;
transform: scale(1);
}
.cssplay-menu #toggle:checked + .holder .center {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 0.5s ease;
transform: scale(1.2);
}
.cssplay-menu #toggle:checked + .holder .curve-upper {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 1s ease;
transform: scale(1);
}
.cssplay-menu #toggle:checked + .holder .curve-lower {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 1s ease;
transform: rotate(-140deg) scale(1);
}
.cssplay-menu #c1:checked ~ .holder .segment label:nth-of-type(1),
.cssplay-menu #c2:checked ~ .holder .segment label:nth-of-type(2),
.cssplay-menu #c3:checked ~ .holder .segment label:nth-of-type(3),
.cssplay-menu #c4:checked ~ .holder .segment label:nth-of-type(4),
.cssplay-menu #c5:checked ~ .holder .segment label:nth-of-type(5),
.cssplay-menu #c6:checked ~ .holder .segment label:nth-of-type(6),
.cssplay-menu #c7:checked ~ .holder .segment label:nth-of-type(7),
.cssplay-menu #c8:checked ~ .holder .segment label:nth-of-type(8),
.cssplay-menu #c9:checked ~ .holder .segment label:nth-of-type(9) {
background: #eb8c00;
}
.cssplay-menu #c1:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(-140deg)
}
.cssplay-menu #c2:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(-100deg)
}
.cssplay-menu #c3:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(-60deg)
}
.cssplay-menu #c4:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(-20deg)
}
.cssplay-menu #c5:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(20deg)
}
.cssplay-menu #c6:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(60deg)
}
.cssplay-menu #c7:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(100deg)
}
.cssplay-menu #c8:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(140deg)
}
.cssplay-menu #c9:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(180deg)
}
.cssplay-menu .sub {
position: absolute;
left: 50%;
top: 100%;
margin-left: -50%;
width: 100%;
height: 0;
overflow: hidden;
}
.cssplay-menu .sub dl {
position: absolute;
top: -190px;
left: 50%;
margin-left: -25%;
padding: 0;
width: 50%;
opacity: 0;
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: all 0.5s ease;
}
.cssplay-menu .sub dl dt {
text-align: center;
font: bold 16px/20px 'Lato', arial, sans-serif;
color: #8b0000;
}
.cssplay-menu .sub dl dd {
margin: 0;
padding: 0;
text-align: center;
font: normal 15px/20px 'Lato', arial, sans-serif;
color: #000;
}
.cssplay-menu .sub dl dd a {
color: #004040;
}
.cssplay-menu #c1:checked ~ #toggle:checked ~ .sub dl:nth-of-type(1),
.cssplay-menu #c2:checked ~ #toggle:checked ~ .sub dl:nth-of-type(2),
.cssplay-menu #c3:checked ~ #toggle:checked ~ .sub dl:nth-of-type(3),
.cssplay-menu #c4:checked ~ #toggle:checked ~ .sub dl:nth-of-type(4),
.cssplay-menu #c5:checked ~ #toggle:checked ~ .sub dl:nth-of-type(5),
.cssplay-menu #c6:checked ~ #toggle:checked ~ .sub dl:nth-of-type(6),
.cssplay-menu #c7:checked ~ #toggle:checked ~ .sub dl:nth-of-type(7),
.cssplay-menu #c8:checked ~ #toggle:checked ~ .sub dl:nth-of-type(8),
.cssplay-menu #c9:checked ~ #toggle:checked ~ .sub dl:nth-of-type(9) {
top: 20px;
opacity: 1;
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5) 0.5s;
transition: opacity 0.5s ease, top 0.5s ease 0.5s;
}
.cssplay-menu #c1:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c2:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c3:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c4:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c5:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c6:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c7:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c8:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c9:checked ~ #toggle:checked ~ .sub {
height: 250px
}
<div class="cssplay-menu">
<div>
<input type="radio" id="c1" name="segment" checked="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="radio" id="c9" name="segment">
<input type="checkbox" id="toggle" checked="checked">
<div class="holder">
<div class="segment">
<label for="c1"><span></span></label>
<label for="c2"><span></span></label>
<label for="c3"><span></span></label>
<label for="c4"><span></span></label>
<label for="c5"><span></span></label>
<label for="c6"><span></span></label>
<label for="c7"><span></span></label>
<label for="c8"><span></span></label>
<label for="c9"><span></span></label>
</div>
<div class="curve-lower">
<div class="curve"></div>
</div>
<div class="curve-upper"></div>
<label for="toggle" class="center"></label>
</div>
<div class="sub">
<dl>
<dt>SUB MENU #1</dt>
<dd>Item #1.1</dd>
<dd>Item #1.2</dd>
<dd>Item #1.3</dd>
<dd>Item #1.4</dd>
</dl>
<dl>
<dt>SUB MENU #2</dt>
<dd>Item #2.1</dd>
<dd>Item #2.2</dd>
<dd>Item #2.3</dd>
</dl>
<dl>
<dt>SUB MENU #3</dt>
<dd>Item #3.1</dd>
<dd>Item #3.2</dd>
<dd>Item #3.3</dd>
<dd>Item #3.4</dd>
</dl>
<dl>
<dt>SUB MENU #4</dt>
<dd>Item #4.1</dd>
<dd>Item #4.2</dd>
<dd>Item #4.3</dd>
<dd>Item #4.4</dd>
<dd>Item #4.5</dd>
</dl>
<dl>
<dt>SUB MENU #5</dt>
<dd>Item #5.1</dd>
<dd>Item #5.2</dd>
<dd>Item #5.3</dd>
<dd>Item #5.4</dd>
</dl>
<dl>
<dt>SUB MENU #6</dt>
<dd>Item #6.1</dd>
<dd>Item #6.2</dd>
<dd>Item #6.3</dd>
</dl>
<dl>
<dt>SUB MENU #7</dt>
<dd>Item #7.1</dd>
<dd>Item #7.2</dd>
<dd>Item #7.3</dd>
<dd>Item #7.4</dd>
</dl>
<dl>
<dt>SUB MENU #8</dt>
<dd>Item #8.1</dd>
<dd>Item #8.2</dd>
<dd>Item #8.3</dd>
<dd>Item #8.4</dd>
</dl>
<dl>
<dt>SUB MENU #9</dt>
<dd>Item #9.1</dd>
<dd>Item #9.2</dd>
<dd>Item #9.3</dd>
<dd>Item #9.4</dd>
</dl>
</div>
</div>
</div>