字体图标的使用

css样式

/*字体图标*/
@font-face {
  font-family: 'iconfont';  /* project id 406556 */
  src: url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.eot');
  src: url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.woff') format('woff'),
  url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.svg#iconfont') format('svg');
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-xiala:before { content: "\e657"; }    //下箭头
.icon-xiala1:before { content: "\e604"; }    //上箭头

html代码，在class加入类名 iconfont 和 icon-名称    即可

合上展开动作优化：

效果图

HTML代码

<ul class="quslist">
            <li>
                <p><span>Q</span>1考研预报名必须报吗？预报名之后必须要正式报名吗?<i class="iconfont icon-xiala"></i></p>
                <div class="quslist-txt">
                    内容1
                </div>
            </li>
            <li>
                <p><span>Q</span>2 考研预报名有什么作用？<i class="iconfont icon-xiala"></i></p>
                <div class="quslist-txt">
                    内容2
                </div>
            </li>
            <li>
                <p><span>Q</span>3考研报名注意事项<i class="iconfont icon-xiala"></i></p>
                <div class="quslist-txt">
                    内容3
                </div>
            </li>
        </ul>

js代码：

// 先引入jquery
        $('.quslist li').on('click', function () {
            var isopen = $(this).find('p').find('i').hasClass('icon-xiala');
            if (isopen) {
                $(this).find('.quslist-txt').slideDown();
                $(this).find('p').find('i').removeClass('icon-xiala');
                $(this).find('p').find('i').addClass('icon-xiala1');
            } else {
                $(this).find('.quslist-txt').slideUp();
                $(this).find('p').find('i').removeClass('icon-xiala1');
                $(this).find('p').find('i').addClass('icon-xiala');
            }
        })

js代码2

// 先引入jquery
        $('.quslist li').on('click', function () {
            $(this).find('.quslist-txt').slideToggle();//取代了下面的两行注释的代码
            var isopen = $(this).find('p').find('i').hasClass('icon-xiala');
            if (isopen) {
                // $(this).find('.quslist-txt').slideDown();
                $(this).find('p').find('i').removeClass('icon-xiala');
                $(this).find('p').find('i').addClass('icon-xiala1');
            } else {
                // $(this).find('.quslist-txt').slideUp();
                $(this).find('p').find('i').removeClass('icon-xiala1');
                $(this).find('p').find('i').addClass('icon-xiala');
            }
        })