hiring button의 comment-dots image issue 2
185
1
말씀하신대로 index.html 과 style.css 풀 코드 올립니다.
comment-dots image가 왜 적용 안되는지.. 혹 fontawesome 문제인지.. 설명 부탁 드리겠습니다.
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);
}
답변 2
0
현재 코드는 fontawesome 버전 4.7을 사용하고 있으며 아이콘은 버전 5.0인 것으로 보이는 태그를 사용합니다.
Quick Draw
0
fontawesome4.7 버전을 사용하셨으면 아이콘도 4.7 버전을 사용하셔야 합니다.
지금 코드는 fontawesome4.7 버전을 사용하고 아이콘은 5.0 버전으로 보이는 태그를 사용하셨어요.
/* FontAwesome CDN 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<i class="fa fa-commenting"></i>
<i class="fa-duotone fa-comment-dots"></i>
이 버전에 맞는 아이콘은 아래 찾으시면 아이콘 잘 나옵니다.
https://fontawesome.bootstrapcheatsheets.com/
공식사이트 보다 사용하기 편합니다.
full reload 질문
섹션4에 있는 4번째 강의 질문(스크롤링)
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
css full reload 문제가 발생하여 질문드립니다!
파일 내 index.html에 대한 오류
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
크로스브라우징-크롬
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?
모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태
포지션 속성 중복과 관련해서
section about에 관련.. 궁금해요
섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련
개발자도구
