CSS-用偽元素制作小箭頭（輪播圖的左右切換btn）

先上學習地址：http://www.htmleaf.com/Demo/201610234136.html

作者對輪播圖左右按鈕的處理方法一改往常，不是簡單地用btn.prev+btn.next的圖片代替，而是用純css制作。

第一個是left按鈕，即prev：

.vmc-arrow-left:after {
    content: "\e079";
}

第二個是right按鈕的，也就是next下一張的按鈕：

.vmc-arrow-right:after {
    content: "\e080";
}

最后是二者共同的樣式代碼：

.vmc-arrow-left:after, .vmc-arrow-right:after {
    content: '';
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: 50px;
    line-height: 50px;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 2px 2px #000;
}

首先，我覺得核心代碼就是偽類中添加的那兩個content內容，其次是共同樣式中的font-family的作用，如果不使用這個字體，會變成一個“口”。("口"只是表面現象，是因為我的電腦沒有裝這個字體的緣故，他沒有識別讀取出這個。)

其余，都是樣式了，可以自定義的。

注意到一點是在共同樣式部分，還是要有空內容這個設置先放在那里的。（后來再來看，我突然想起來，忽略了這三個樣式的先后順序關系，那要是共同樣式在后邊，會把前兩個單獨樣式覆蓋掉啊。）

還是同一個網站，不同項目中，看到了font文件夾中有icomoon的字體:

，

好奇查了一下，是一種web圖標字體，這樣就能解釋之前那個案例中，font-family的重要性的原因了。原因是：那種字就是圖標字，而content加載的序號應該就是字庫中對應的那種圖標。如下是一個小房子的圖標代碼：

.icon-htmleaf-home-outline:before {
    content: "\e5000";
}
.htmleaf-icon:before {
    margin: 0 5px;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'icomoon';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

 也就是說：字體“Glyphicons Halflings”中，

"\e079"、"\e080"分別對應的就是左右箭頭了？！

推理沒錯，因為我換一個字體他就不是這個圖標了，眼下搞不懂具體原理，但可以肯定的是，這個字體和這兩個號碼組合，出來的就是左右箭頭圖標。

2017-07-13  17:48:34

前幾天剛掌握了字體圖標，剛好又看到一開始蒙着眼睛走路的自己寫的這篇白痴的文章，

左右箭頭就是字體圖標，這兩天字體圖標原理及文章整理的計划已經被我提上日程，

文章出來以后，見鏈接