아이콘 글꼴을 CSS 속성의 배경으로 설정

아이콘 글꼴을 CSS 속성의 배경으로 설정

CSS의 배경 이미지를 아이콘 이미지가 아닌 아이콘 글꼴로 바꾸기만 하면 됩니다.나는 그것을 끝낼 수 없다.CSS 속성은 다음과 같습니다.

.social-networks .twitter{background:url(../images/social/twitter.png);}

PHP의 코드는 다음과 같습니다.

<ul class="social-networks">
    <?php if (my_option('twitter_link')): ?>
        <li>
            <a href="<?php echo my_option('twitter_link'); ?>"  class="twitter">twitter</a>
        </li>
    <?php endif; ?>

언콘서트를 삽입하는 방법은<span class="icon">A</span>

이런 식으로 시도해 볼 수 있습니다. FILEND

DIV가 있다고 칩시다.

<div class="test"></div>

다음과 같이 css 스타일을 작성합니다.

.test {
    width: 100px;
    height: 100px;
    border: 2px solid lightblue;
}

.test:before {
    content: "H";
    width: 100%;
    height: 100%;
    font-size: 5.0em;
    text-align: center;
    display: block;
    line-height: 100px;
}​

부동산에content"글자"를 선택한 후, 그 "글자"를 변경할 수 있습니다.font-size,font-weight,color등...

css에 콘텐츠 속성이 있습니다.

.icon-rocket:after {
   content: "{Symbol for rocket}";
}

http://www.w3schools.com/cssref/pr_gen_content.asp

배경 이미지 대신 네비게이션 텍스트를 사용합니다.

$(".slider").owlCarousel({
    navigation : true,
    slideSpeed : 500,
    singleItem:true,
    navigationText:['<i class="fa fa-chevron-left" aria-hidden="true"></i>', '<i class="fa fa-chevron-right" aria-hidden="true"></i>']
});

폰트 awesome 아이콘의 css 속성을 설정합니다.아이콘에 대한 일반 css입니다.

.owl-button{
   position:relative;
}
.owl-prev {
   position:absolute;
   top:0;
   left:47%;
   font-size: 30px;
}
.owl-next {
    position:absolute;
    top:0;
    right:47%;
    font-size: 30px;
}

흥미로운 걸 생각해냈어요 CSS요element()기능.현재는 파이어폭스에서만 동작합니다(따라서 해당 브라우저의 마지막에 링크된 예를 열어주세요).

HTML은 다음과 같습니다.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

<div class="bg-patterns">
  <i class="material-icons" id="icon">pets</i>
</div>

<div class="with-icon-bg">
   Hi! I'm paragraph with background made from ordinary HTML element! And BTW - I'm a pets lover. 
</div>

...코멘트를 포함한 CSS:

.material-icons {
  /* icon font */
  font-family: 'Material Icons'; 
  color: #ddd;
}

/* this is a wrapper for elements you want to use
as backgrounds, should not be visible on page */
.bg-patterns {
  margin-left: -90000cm; 
}

.with-icon-bg {
  /* all magic happens here */
  background: -moz-element(#icon);


  /* other irrelevant styling */
  font-size: 25px;
  width: 228px;
  margin: 0 auto;
  padding: 30px;
  border: 3px dashed #ddd;
  font-family: sans-serif;
  color: #444;
  text-align: center;
}

그리고 마지막으로 작업 예(jsFiddle)가 있습니다.

언급URL : https://stackoverflow.com/questions/13869618/set-icon-font-as-background-in-css-property