
一般網站開發者,常常會需要用到一些小圖示,不過自己畫麻煩,加上其實大多的圖示為了要能表達一樣的意思,形狀並不會差太多,於是就有類似
Ligature Symbols的技術,可以讓你輕鬆在網站裡加入小圖示,加上因為他是文字的格式,你只要設定font-size就可以調整大小,很方便,可以來試試看。
網站:
Ligature Symbols
連到網站可以看到許多圖示,他都是文字的格式。
首先下載網站上的附件,然後可以參考他的html,基本上有三種格式。
<p>Simple use for mailto link.</p>
<a href="mailto:[email protected]" class="lsf">mail</a>
<p>Use tha icon with text.</p>
<a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a>
<p>Use tha icon with unicode.</p>
<a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a>
第一種是只有圖示,第二種則是文字加圖示,第三種則是Unicode的格式。
然後在網頁上加上如下的CSS
- @font-face {
- font-family: 'LigatureSymbols';
- src: url('LigatureSymbols-2.09.eot');
- src: url('LigatureSymbols-2.09.eot?#iefix') format('embedded-opentype'),
- url('LigatureSymbols-2.09.woff') format('woff'),
- url('LigatureSymbols-2.09.ttf') format('truetype'),
- url('LigatureSymbols-2.09.svg#LigatureSymbols') format('svg');
- src: url('LigatureSymbols-2.09.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
- }
-
- .lsf, .lsf-icon:before {
- font-family: 'LigatureSymbols';
- -webkit-text-rendering: optimizeLegibility;
- -moz-text-rendering: optimizeLegibility;
- -ms-text-rendering: optimizeLegibility;
- -o-text-rendering: optimizeLegibility;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- -o-font-smoothing: antialiased;
- font-smoothing: antialiased;
- }
-
- .lsf-icon:before {
- content:attr(title);
- margin-right:0.3em;
- font-size:130%;
- }
-
- .lsf-icon.amazon:before {
- content: '\E007';
- }
這樣就可以看到你的文字變成圖示了,可以對照網站上支援的文字圖示,藉由替換文字內容更改圖示,另外也可以藉由更改DOM的顏色跟大小來自定圖示。

像我這個就是把a設為暗紅色,沒有連結的就用span,就會有如上圖的效果。
Read more