• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

hiring button의 comment-dots image issue

22.07.17 16:25 작성 조회수 128

1

hiring button에서 comment-dots image 가 화면에 안 나타납니다. 

기본적인 부분인데 이유를 모르겠어서 요청 드립니다.

index.html 과 style.css 풀 코드 올립니다. 
 
index.html:
 
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>bizpage website - Architecture</title>
<script src="js/jquery-2.1.4.js"></script>
<!-- Page scroll Effects JS & CSS -->
<script src="js/velocity/modernizr.js"></script>
<script src="js/velocity/velocity.min.js"></script>
<script src="js/velocity/velocity.ui.min.js"></script>
<script src="js/velocity/main.js"></script>
<link rel="stylesheet" href="js/velocity/velocity.css">
<!-- Smooth Scrolling -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- Custom JS & CSS -->
<script src="custom.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>

 

<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="on" data-animation="rotate">
<div class="container">
<section class="cd-section visible" id="home">
<div>
<div class="content">
<img src="images/temp-section-01.jpg">
</div>
</div>
</section>
<section class="cd-section" id="about">
<div>
<div class="content">
<img src="images/temp-section-02.jpg">
</div>
</div>
</section>
<section class="cd-section" id="project">
<<div>
<div class="content">
<img src="images/temp-section-03.jpg">
</div>
</div>
</section>
<section class="cd-section" id="plan">
<div>
<div class="content">
<img src="images/temp-section-04.jpg">
</div>
</div>
</section>
<section class="cd-section" id="awards">
<div>
<div class="content">
<img src="images/temp-section-05.jpg">
</div>
</div>
</section>
<section class="cd-section" id="location">
<div>
<div class="content">
<img src="images/temp-section-06.jpg">
</div>
</div>
</section>
<section class="cd-section" id="contact">
<div>
<div class="content">
<img src="images/temp-section-07.jpg">
</div>
</div>
</section>
<header class="active">
<div class="gnb-inner">
<div class="logo active">bizpage</div>
<div class="gnb active">
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#project">Project</a>
<a href="#plan">Plan & History</a>
<a href="#awards">Awards</a>
<a href="#location">Location</a>
<a href="#contact">Contact</a>
</div>
<div class="slogan">We think different and make different.</div>
</div>
<div class="trigger active">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
</div>
<a href="#" class="gototop active"><img src="images/gototop.png"></a>
<a href="" class="btn-hiring"><i class="fa-duotone fa-comment-dots"></i>Hiring</a>
<nav>
<ul class="cd-vertical-nav">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul>
</nav>
</body>
</html>
 
 
style.css:
 
/* Google Web Font : Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nunito&family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');

/* FontAwesome CDN 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* Reset CSS */
* { box-sizing: border-box;}
ul {list-style: none;}
a {text-decoration: none;}

/* Default CSS */
body {
font-family: 'Mondtserrat', 'sans-serif';
color: #222;
font-size: 15px;
margin: 0;
height: 100vh;
background-color: #fff;
}

/* Entire Layout */
.cd-section {
height: 100vh;
}
.cd-section > div {
height: 100%;
position: relative;
}
.content {
background-color: #ddd;
position: absolute;
width: calc(100% - 40px);
height: calc(100% - 80px);
left: 20px;
bottom: 20px;
overflow: hidden;
}

/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.gnb-inner {
/* border: 1px solid #000; */
width: calc(100% - 40px);
margin: auto;
height: 60px;
line-height: 60px;
}
.logo {
font-size: 2.4rem;
font-weight: bold;
color: #066bf7;
float: left;
}
/* .logd img {
padding-top: 17px;
} */
.gnb {
float: right;
}
.menu {
display: none;
}
/* .menu a {} */
.slogan {
font-style: italic;
font-size: 16px;
float: right;
}
.trigger {
display: none;
}

/* Hiring Button */
.btn-hiring {
position: fixed;
right: 30px;
bottom: 30px;
color: #fff;
background-color: #000;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.38);
transition: 0.5s;
}
.btn-hiring .fa-duotone {
transform: rotateY(180deg);
margin-right: 5px;
}
.btn-hiring:active {
transform: scale(0);
}
course-thumbnail

반응형 웹사이트 포트폴리오(Architecture Agency)

모바일 네비게이션 퍼블리싱 - 우측 하단 hiring 버튼 만들기

강의실 바로가기

답변 1

답변을 작성해보세요.

0

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2022.07.17

폰트아이코 cdn 문제일 수 있으니 풀 코드를 올려주세요~

ohwhy님의 프로필

ohwhy

질문자

2022.07.17

기본적인 부분인데 이유를 모르겠어서 요청 드립니다.

index.html 과 style.css 풀 코드 올립니다. 
 
index.html:
 
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>bizpage website - Architecture</title>
<script src="js/jquery-2.1.4.js"></script>
<!-- Page scroll Effects JS & CSS -->
<script src="js/velocity/modernizr.js"></script>
<script src="js/velocity/velocity.min.js"></script>
<script src="js/velocity/velocity.ui.min.js"></script>
<script src="js/velocity/main.js"></script>
<link rel="stylesheet" href="js/velocity/velocity.css">
<!-- Smooth Scrolling -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- Custom JS & CSS -->
<script src="custom.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>

 

<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="on" data-animation="rotate">
<div class="container">
<section class="cd-section visible" id="home">
<div>
<div class="content">
<img src="images/temp-section-01.jpg">
</div>
</div>
</section>
<section class="cd-section" id="about">
<div>
<div class="content">
<img src="images/temp-section-02.jpg">
</div>
</div>
</section>
<section class="cd-section" id="project">
<<div>
<div class="content">
<img src="images/temp-section-03.jpg">
</div>
</div>
</section>
<section class="cd-section" id="plan">
<div>
<div class="content">
<img src="images/temp-section-04.jpg">
</div>
</div>
</section>
<section class="cd-section" id="awards">
<div>
<div class="content">
<img src="images/temp-section-05.jpg">
</div>
</div>
</section>
<section class="cd-section" id="location">
<div>
<div class="content">
<img src="images/temp-section-06.jpg">
</div>
</div>
</section>
<section class="cd-section" id="contact">
<div>
<div class="content">
<img src="images/temp-section-07.jpg">
</div>
</div>
</section>
<header class="active">
<div class="gnb-inner">
<div class="logo active">bizpage</div>
<div class="gnb active">
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#project">Project</a>
<a href="#plan">Plan & History</a>
<a href="#awards">Awards</a>
<a href="#location">Location</a>
<a href="#contact">Contact</a>
</div>
<div class="slogan">We think different and make different.</div>
</div>
<div class="trigger active">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
</div>
<a href="#" class="gototop active"><img src="images/gototop.png"></a>
<a href="" class="btn-hiring"><i class="fa-duotone fa-comment-dots"></i>Hiring</a>
<nav>
<ul class="cd-vertical-nav">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul>
</nav>
</body>
</html>
 
 
style.css:
 
/* Google Web Font : Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nunito&family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');

/* FontAwesome CDN 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* Reset CSS */
* { box-sizing: border-box;}
ul {list-style: none;}
a {text-decoration: none;}

/* Default CSS */
body {
font-family: 'Mondtserrat', 'sans-serif';
color: #222;
font-size: 15px;
margin: 0;
height: 100vh;
background-color: #fff;
}

/* Entire Layout */
.cd-section {
height: 100vh;
}
.cd-section > div {
height: 100%;
position: relative;
}
.content {
background-color: #ddd;
position: absolute;
width: calc(100% - 40px);
height: calc(100% - 80px);
left: 20px;
bottom: 20px;
overflow: hidden;
}

/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.gnb-inner {
/* border: 1px solid #000; */
width: calc(100% - 40px);
margin: auto;
height: 60px;
line-height: 60px;
}
.logo {
font-size: 2.4rem;
font-weight: bold;
color: #066bf7;
float: left;
}
/* .logd img {
padding-top: 17px;
} */
.gnb {
float: right;
}
.menu {
display: none;
}
/* .menu a {} */
.slogan {
font-style: italic;
font-size: 16px;
float: right;
}
.trigger {
display: none;
}

/* Hiring Button */
.btn-hiring {
position: fixed;
right: 30px;
bottom: 30px;
color: #fff;
background-color: #000;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.38);
transition: 0.5s;
}
.btn-hiring .fa-duotone {
transform: rotateY(180deg);
margin-right: 5px;
}
.btn-hiring:active {
transform: scale(0);
}

이 글과 비슷한 Q&A