1. 說到字體圖標(biāo), 現(xiàn)在我所做的項(xiàng)目中用到很多.
比如一個(gè)路徑節(jié)點(diǎn)圖
image.png
, 每個(gè)節(jié)點(diǎn)都可以用字體圖標(biāo)來代替, 這樣做能使得 顏色/圖形大小等待可以更方便的調(diào)整.
2. 怎么使用字體圖標(biāo)呢?
2.1 首先, 你需要用ps將你需要的圖標(biāo)導(dǎo)出成svg, 然后通過這個(gè)鏈接https://icomoon.io/app/#/select 將那些svg引入. 生成字體圖標(biāo)的操作可以參照這個(gè)鏈接http://blog.csdn.net/u013938465/article/details/50680468 的介紹(額, 我只是代碼的搬運(yùn)工=. =), 很詳細(xì)的呢
2.2 下面就是需要在你的項(xiàng)目里面設(shè)置一些東西了
2.2.1 在css文件里面需要先引入你再2.1步驟中生成的文件, 應(yīng)該是四個(gè)文件,像這樣的樣子:
image.png
, 通過設(shè)置
@font-face{
font-family: 'icomoon';
src: url('font/icomoon.eot?pylhfs');
src: url('font/icomoon.eot?pylhfs#iefix') format('embedded-opentype'),
url('font/icomoon.ttf?pylhfs') format('truetype'),
url('font/icomoon.woff?pylhfs') format('woff'),
url('font/icomoon.svg?pylhfs#stage-font') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change font */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
2.2.2 標(biāo)簽類名必須以 icon- 開頭, 然后你就可以'為所欲為'啦. 通過給該標(biāo)簽添加偽元素(::before/::after), 然后通過設(shè)置偽元素樣式中的content屬性, 其值為你需要添加的字體圖標(biāo)的值. 然后通過font-size可以改變圖標(biāo)的大小, color改變圖標(biāo)的顏色......
ps: i標(biāo)簽是不能添加偽元素的.
