​ ​

空のi要素なしでBootstrapなアイコンを付与する

こんにちゎ。マークアップエンジニアのjamadamです。

良記事に感化されたので、ブログを書いてみます。

"マークアップ"するということ ~ HTML5勧告に寄せて ~

http://hail2u.net/documents/markup.html

激しく非難するのなら似非セマンティクスと呼んでも良いだろう。ちょうど昔のTwitter Bootstrapがアイコンの表示に空のi要素をidentifierだからと使っていたことに似ている。

ということで、セマンティックなマークアップでBootstrapなアイコンを使う方法を検討してみました。

HTML

※divにはツッコミなしでお願いします。pは使いづらいのです。

<div class="errorMessage">
    エラー
</div>

<div class="toolbar">
    <button class="mailSenderOpener">メール送信</button>
    <button class="csvDownloadOpener">ダウンロード</button>
</div>

SCSS module

bootstrap-sassてのもあるんですが、実装方法が気に入らないので、自分で作ってしまいます。全容はgithubにさらしておきます。

/**
 * Mixins for Glyphicons
 */

/**
 * @font-face
 */
@mixin glyphiconFontFace($fontdir) {
    $fontId: "glyphicons-halflings-regular";
    @font-face {
        font-family: 'Glyphicons Halflings';
        src: url('#{$fontdir}#{$fontId}.eot');
        src: url('#{$fontdir}#{$fontId}.eot?#iefix') format('embedded-opentype'),
             url('#{$fontdir}#{$fontId}.woff') format('woff'),
             url('#{$fontdir}#{$fontId}.ttf') format('truetype'),
             url('#{$fontdir}#{$fontId}.svg#glyphicons_halflingsregular') format('svg');
    }
}

/**
 * Append icon into element
 */
@mixin glyphiconBefore($keyword) {
    @include _glyphiconBackend($keyword, 1);
}

/**
 * Prepend icon into element
 */
@mixin glyphiconAfter($keyword) {
    @include _glyphiconBackend($keyword, 2);
}

/**
 * Append or prepend icon into element (internal use only)
 */
@mixin _glyphiconBackend($keyword, $pos) {

    $catalog: (
        asterisk               :"\2a",
        plus                   :"\2b",
        euro                   :"\20ac",
        ...
        ...省略
        ...
        cloud-upload           :"\e198",
        tree-conifer           :"\e199",
        tree-deciduous         :"\e200",
    );

    &:#{nth(("before", "after"), $pos)} {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: map-get($catalog, $keyword);
        margin-#{nth(("right", "left"), $pos)}: 0.3em;
    }
}

Your SCSS

@import './_glyphicons.scss';
@include glyphiconFontFace("/path/to/font/glyphicons/");

.errorMessage {
    @include bootstrapAlertError();
    @include glyphiconBefore(exclamation-sign);
}
.toolbar {
    .mailSenderOpener {
        @include bootstrapButtonSmall();
        @include glyphiconBefore(envelope);
    }
    .downloadOpener {
        @include bootstrapButtonSmall();
        @include glyphiconBefore(download-alt);
    }
}

結果

モダンブラウザとIE9ではうまく行ってそうです。

※注: glyphiconsのフォントは脱 Twitter Bootstrap するとライセンス表示が必須になりそうです。いちおうチェックしておくとよいです。 http://glyphicons.com/license/

このエントリーをはてなブックマークに追加