CSS writing-mode实现全兼容icon fonts图标旋转实例页面

回到相关文章 »

代码:

CSS代码:
@font-face {
    font-family: 'icomoon';
    src: url('icomoon.eot?44fxnl');
    src: url('icomoon.eot?44fxnl#iefix') format('embedded-opentype'),
         url('icomoon.ttf?44fxnl') format('truetype'),
         url('icomoon.woff?44fxnl') format('woff'),
         url('icomoon.svg?44fxnl#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon-play {
    font-family: 'icomoon';
}

.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
    *writing-mode: tb-rl;
}
                
HTML代码:
<p><strong>默认流</strong></p>
<span class="icon-play">r</span> 箭头朝右

<p><strong>垂直流</strong></p>
<span class="icon-play verticle-mode">r</span> 箭头朝下
                

效果:

默认流

r 箭头朝右

垂直流

r 箭头朝下