font-awesome 질문있습니다.

font-awesome 질문있습니다.

QA

font-awesome 질문있습니다.

본문

3076752868_1561424627.0572.jpg

 

저 줄과함께 별을 구형하고 싶어 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 클래스는 합칠수있는 방법은 없는걸까요?? 제가 일자무식이라;;;;

이것만 합치면 될듯한데...

답변을 작성하시기 전에 로그인 해주세요.
전체 123,166 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT