font-awesome 질문있습니다.
본문
저 줄과함께 별을 구형하고 싶어 gshn님께서 올려주신 소스를 무쟈게 이리바꺼도 보고 저리 바꺼도 보았는데도 적용이안되는데 왜 그런걸까요.
그래서 혹시나하고 테마를 설치해봣는데 테마 자체도 적용이 안되고 그냐 -줄만 나오고 별은 나오지가 않더군요. 고수님들 도움좀 주십시요..
head.sub.php 부분
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/<?php echo G5_IS_MOBILE ? 'mobile' : 'default'; ?>.css">
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/animate.min.css">
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic">
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/app.css">
index.php 에서 저 별과 줄을 출력하는 부분
<hr class="star-light wow zoomIn ">
css에서 저 별을 선언해주는 부분
hr.star-light,
hr.star-primary {
padding: 0;
border: none;
border-top: solid 5px;
text-align: center;
max-width: 250px;
margin: 25px auto 30px;
}
hr.star-light:after,
hr.star-primary:after {
content: "\f005";
font-family: FontAwesome;
display: inline-block;
position: relative;
top: -0.8em;
font-size: 2em;
padding: 0 0.25em;
}
hr.star-light {
border-color: white;
}
hr.star-light:after {
background-color: #18bc9c;
color: white;
}
hr.star-primary {
border-color: #2c3e50;
}
hr.star-primary:after {
background-color: white;
color: #2c3e50;
이 font-awesome이 구형버전이라 안되는가해서 그나마 5.5 앞전버전이 4.7버전으로 해봣는데도 안되더군요... 저로 써는 ㅜㅜ 고수님들 도움좀 나눠주세요.
즐거운 하루 보내세요!
답변 2
원하시는 형태랑 일치할지 모르겠네요.
<style>
.star-line{width: 300px;position:relative;background: #fff;z-index: 1100;text-align: center;display: inline-block;}
.star-line:before{width: 100px;z-index: 9999!important;background: #fff;display: inline-block;}
.star-line:after{
content: '';
height: 10%;
width:100%;
position: absolute;
background: #000;
right:0;
top:50%;
transform:translateY(-50%);
z-index:-1;
border-radius: 10px;
}
</style>
<i class="star-line fas fa-star" style="font-size: 48px;"></i>
길게 답변을 써주셧는데 ㅜㅜ 아니네요...
<i class="star-light fa fa-fw fa-star wow zoomIn"></i>
<hr class="star-light wow zoomIn "></hr>
hr 과 i 클래스는 합칠수있는 방법은 없는걸까요?? 제가 일자무식이라;;;;
이것만 합치면 될듯한데...