CSS3自帶圖標編碼是一種非常方便的方式來使用矢量圖標，它可以幫助我們快速的創建一個美觀的UI界面。在CSS3中，我們可以使用::before和::after偽元素，以及content屬性來插入我們想要的圖標。

.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon:before {
content: "\f007";
}

在上面的代碼中，我們首先定義了一個.icon的class，并設置它的display為inline-block。接著，我們使用FontAwesome字體，并使用before偽元素和content屬性來插入我們的圖標。在content屬性中，我們可以使用圖標編碼來顯示想要的圖標。

CSS3自帶圖標編碼的優點是它可以通過使用字體來直接顯示圖標，這意味著你可以很容易地修改它們的大小、顏色，或者添加陰影效果等。而且，使用矢量圖標的另一個好處是它們可以在任何分辨率下都保持清晰度。

總之，CSS3自帶圖標編碼是一種非常實用的技術，它可以幫助我們快速地創建一個漂亮的UI界面。如果你還沒有嘗試過它，建議你嘗試一下。