html中的排序按钮，就是那种带两个三角号图标的那种怎么做啊

如图所示：

就是这种排序的按钮，左边的那种三角图标是怎么实现的啊？不要那种图片的，有没有大神用过插件的啊，bootstrap中有这种插件吗？求指教

http://www.fontawesome.com.cn/faicons/
中文官网

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>三角符号</title>
    <style type="text/css">
    .triangle-up {
        display: inline-block;
        border: 50px solid transparent;
        border-top-color: #27BEB9;
        border-bottom: 0;
    }

    .triangle-down {
        display: inline-block;
        border: 50px solid transparent;
        border-bottom-color: #27BEB9;
        border-top: 0;
    }

    .triangle-left {
        display: inline-block;
        border: 25px solid transparent;
        border-left-color: #27BEB9;
        border-right: 0;
    }

    .triangle-right {
        display: inline-block;
        border: 25px solid transparent;
        border-right-color: #27BEB9;
        border-left: 0;
    }
    </style>
</head>

<body>
    <span class="triangle-up"></span>
    <span class="triangle-down"></span>
    <span class="triangle-right"></span>
    <span class="triangle-left"></span>
</body>

</html>

这种一般都是图片吧，，不然得自己画出来？h5？还是图片方便点吧，，个人见解

这是图片，通过图片所在的标签写相关事件达到点击改变的效果

fontawesome,官网上有详细的使用说明，使用方便，你要求的那个图标名为 sort

<!DOCTYPE html>

三角符号
 .triangle-up { display: inline-block; border: 50px solid transparent; border-top-color: #27BEB9; border-bottom: 0; } <pre><code>.triangle-down { display: inline-block; border: 50px solid transparent; border-bottom-color: #27BEB9; border-top: 0; } .triangle-left { display: inline-block; border: 25px solid transparent; border-left-color: #27BEB9; border-right: 0; } .triangle-right { display: inline-block; border: 25px solid transparent; border-right-color: #27BEB9; border-left: 0; } </style> </code></pre> </head> <body> </body> </html>

那是背景background设置图片