글 머리 기호로 변경

Question

화면이 변경되면 어떻게 이미지를 글 머리 기호로 바꿀 수 있습니까? 이미지를 총알로 바꾸고 싶습니다.

CSS :

.fslider, 
.fslider .flexslider, 
.fslider .slider-wrap, 
.fslider .slide, 
.fslider .slide > a, 
.fslider .slide > img, 
.fslider .slide > a > img { 
    position: relative; 
    display: block; 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
    -webkit-backface-visibility: hidden; 
} 

.fslider { min-height: 32px; } 

.flex-container a:active, 
.flexslider a:active, 
.flex-container a:focus, 
.flexslider a:focus { outline: none; border: none; } 
.slider-wrap, 
.flex-control-nav, 
.flex-direction-nav {margin: 0; padding: 0; list-style: none; border: none;} 

.flexslider {position: relative;margin: 0; padding: 0;} 
.flexslider .slider-wrap > .slide {display: none; -webkit-backface-visibility: hidden;} 
.flexslider .slider-wrap img {width: 100%; display: block;} 
.flex-pauseplay span {text-transform: capitalize;} 

.slider-wrap:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slider-wrap {display: block;} 
* html .slider-wrap {height: 1%;} 

.no-js .slider-wrap > .slide:first-child {display: block;} 

//ViewPort (Big Image) 
.flex-viewport { 
    max-height: 2000px; 
    -webkit-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

//Nav 
.flex-control-nav { 
    position: absolute; 
    z-index: 10; 
    text-align: center; 
    top: 14px; 
    right: 10px; 
    margin: 0; 
} 

.flex-control-nav li { 
    float: left; 
    display: block; 
    margin: 0 3px; 
    width: 10px; 
    height: 10px; 
} 

.flex-control-nav li a { 
    display: block; 
    cursor: pointer; 
    text-indent: -9999px; 
    width: 10px !important; 
    height: 10px !important; 
    border-radius: 50%; 
    transition: all .3s ease-in-out; 
    -webkit-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
} 

.flex-control-nav li:hover a, 
.flex-control-nav li a.flex-active { background-color: #FFF; } 

/* Flex Slider - Thumbs 
-----------------------------------------------------------------*/ 

.fslider[data-animation="fade"][data-thumbs="true"] .flexslider, 
.fslider.testimonial[data-animation="fade"] .flexslider { height: auto !important; } 

//Thumbs <ol> 
.flex-control-nav.flex-control-thumbs { 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: 2px -2px -2px 0; 
    height: 110px; 
} 

//Margin and Background of each images 
.flex-control-nav.flex-control-thumbs li { margin: 0 2px 2px 0; background-color: #EBEBEB; } 

.flex-control-nav.flex-control-thumbs li img { 
    cursor: pointer; 
    text-indent: -9999px; 
    border: 0; 
    border-radius: 0; 
    margin: 0; 
    -webkit-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
} 

//Width and Height of an image 
.flex-control-nav.flex-control-thumbs li, 
.flex-control-nav.flex-control-thumbs li img { 
    display: block; 
    width: 100px !important; 
    height: 110px !important; 
} 

//Put some transition and border for an active image 
.flex-control-nav.flex-control-thumbs img, 
.flex-control-nav.flex-control-thumbs li img.flex-active { 
    -webkit-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    border: 2px solid #FF5501; 
} 

Answer 1

난 당신이 축소 테마를 사용하는 것 같아요. 대신 basic theme을 사용해보십시오.