Ligature Symbols for LESS CSS

ちょっとしたアイコンを Web フォントで表示することができる Ligature Symbols。単なるシンボルフォントではなく OpenType 合字を使っていて、たとえば「mail」というテキストでメールアイコンを表示できる優れものだ。

• Ligature Symbols

これを LESS でミックスインとしても使えるようにしてみた。

ソース

@font-face {
	font-family: 'LigatureSymbols';
	src: url('LigatureSymbols-2.04.eot');
	src: url('LigatureSymbols-2.04.eot?#iefix') format('embedded-opentype'),
		 url('LigatureSymbols-2.04.woff') format('woff'),
		 url('LigatureSymbols-2.04.ttf') format('truetype'),
		 url('LigatureSymbols-2.04.svg#LigatureSymbols') format('svg');
	src: url('LigatureSymbols-2.04.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.lsf {
	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-put-icon(@content attr(title)) {
	content: @content;
	margin-right: 0.4em;
	font-size: 130%;
	.lsf;
}

.lsf-prepend-icon(@content: attr(title)) {
	&:before { .lsf-put-icon(@content); }
}

.lsf-append-icon(@content: attr(title)) {
	&:after { .lsf-put-icon(@content); }
}

.lsf-icon { .lsf-prepend-icon; }

使用例

/* ボタンの左側に左矢印を表示 */
.btn.back { .lsf-prepend-icon("left"); }

/* リンクの右側に右矢印を表示 */
.list a { display: block; position: relative; }
.list a:after { .lsf-put-icon("right"); position: absolute; right: 10px; top: 50%; height: 20px; margin-top: -10px; }