ページのアイコン - paulbarre/RssReader GitHub Wiki

このレッスンでは、ページのボタンにアイコンを表示するための方法について説明します。今回はFont Awesomeを利用してみます。

Font Awesomeのセットアップ

Font Awesomeのダウンロードはこちら。Downloadのボタンにクリックし、下のボタンからダウンロードができます。

ダウンロードしたzipファイルを展開します。展開したフォルダーの中にあるfonts/フォルダーをコピーして、RssReader/フォルダー配下にペーストします。css/フォルダーにあるfont-awesome.min.cssファイルをRssReader/css/配下にコピーします。

次にindex.htmlのヘッダーに上記のCSSファイルのリンクを追加します。

<head>
    ...
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    ...
</head>

Font Awesomeのセットアップは以上です。

Font Awesomeの使い方

基本的には、Font Awesomeはフォントの一つです。font-awesome.min.cssに定義されるクラスがこのフォントを使い、クラスがそれぞれのフォントの文字を利用します。

例として、❤の文字を書きたいなら、下記のように記述します。

<i class="fa fa-heart"></i>

faというクラスが「Font Awesomeのフォントを使う」という意味で、fa-heartが「ハートの文字を使う」という意味です。

当ライブラリーのウェブサイトにあるアイコン一覧を見て、fa-heartだけではなく、好きなアイコンをセットすることができます。

RSSリーダー

それでは、開発したページのボタンにアイコンを付けましょう。

favorite.js

function displayFavorites() {

    ...
    $.each(favorites, function (i, favorite) {

        var html =
            '<li>' + favorite.title +
            '<button class="download-btn" data-url="' + favorite.url + '"><i class="fa fa-rss"></i></button>' +
            '<button class="delete-favorite-btn" data-url="' + favorite.url + '"><i class="fa fa-close"></i></button>' +
            '</li>';
        $('#favorites-list').append(html);
    });

    ...
}

bookmark.js

function displayBookmarks() {

    ...
    $.each(bookmarks, function (i, bookmark) {

        var html =
            '<li>' +
            '<a href="' + bookmark.url + '" target="_blank">' + bookmark.title + '</a>' +
            '<button class="delete-bookmark-btn" data-url="' + bookmark.url + '"><i class="fa fa-close"></i></button>' +
            '</li>';
        $('#bookmarks-list').append(html);
    });

    ...
}

feed.js

function displayFeedResults(xmlData) {

    ...
    items.each(function(n) {

        ...

        var html =
            '<article>' +
            '<h3 class="article-title">' + title + '</h3>' +
            '<p class="article-description">' + description + '</p>' +
            '<a href="' + link + '" target="_blank" class="see-article-link">See</a>' +
            '<button class="save-bookmark-btn"><i class="fa fa-heart"></i></button>' +
            '</article>';

        $('#feed-articles').append(html);
    });

    ...
}

ブラウザーでページを更新し、反映した内容を確認してみましょう。

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️