关于在bootstrap中如何做垂直排列的tab切换效果

话不多说，先上效果图
如何实现这种列向的tab切换呢，我图片用的字体图标，随便自己
html代码

<div class="col-md-1">
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation" class="active">
                        <a href="#news01" data-toggle="tab" role="tab"><i class="icon-news01"></i></a>
                    </li>
                    <li role="presentation">
                        <a href="#news02" data-toggle="tab" role="tab"><i class="icon-news02"></i></a>
                    </li>
                    <li role="presentation">
                        <a href="#news03" data-toggle="tab" role="tab"><i class="icon-news03"></i></a>
                    </li>
                    <li role="presentation">
                        <a href="#news04" data-toggle="tab" role="tab"><i class="icon-news04"></i></a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 ">
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="news01">11</div>
                    <div role="tabpanel" class="tab-pane fade " id="news02">22</div>
                    <div role="tabpanel" class="tab-pane fade " id="news03">33</div>
                    <div role="tabpanel" class="tab-pane fade " id="news04">44</div>
                </div>
            </div>

css代码

#news{padding:50px 0}
#news .news-title{
    padding:20px 0px;
    font-size:18px;
    font-weight:400;
    text-align: center;
    border-bottom:1px dashed #c0c0c0;
    position:relative;
    margin-right:10px;
}
#news .news-title::after{
    content:'';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    border:1px solid #c0c0c0;
    position:absolute;
    bottom:-5px;
    right:-10px;
}
.icon-news01::before{
    content:'\e90e';
    font-size: 28px;
    color:#EAEAEA;
}
.icon-news02::before{
    content:'\e90f';
    font-size: 28px;
    color:#EAEAEA;
}
.icon-news03::before{
    content:'\e910';
    font-size: 28px;
    color:#EAEAEA;
}
.icon-news04::before{
    content:'\e911';
    font-size: 28px;
    color:#EAEAEA;
}