MingCute Iconを使ってみた

ぎぐん

2024年3月14日 16:22

この記事の続きです。

WEBアプリにはお洒落なアイコンを使いたいものです。
以前からMingCuteには目を付けていました。
（無料・商用可・再配布可・アプリ埋込OK）

魅力的ですが、使い方がさっぱり分からないのです。
ChatGPTに聞いたり、ぐぐったりしてやっと使えました。

使い方

ダウンロードしたMingCute-mainというフォルダの中の、fontsフォルダをプロジェクトフォルダにコピペする。
HTML（like_icon.html）の<head></head>に、相対パス（参照）を使って外部リソースを記述する。

※下記と同じディレクトリ構成であれば、<link rel="stylesheet" href="css/fonts/MingCute.css">と記述する。

ディレクトリ構成図

C:.
│  like_icon.html
│  script.js
│
└─css
    │  styles.css
    │
    └─fonts
            MingCute.css
            MingCute.eot
            MingCute.svg
            MingCute.ttf
            MingCute.woff

アイコンを入れたい場所に、<span class="mgc_heart_line"></span>のように、"class = mgc_アイコンの名前_lineかfill"と記述すると使えます。

使用例

like_icon.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sns</title>
    <link rel="stylesheet" href="css/fonts/MingCute.css">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <span id="like" class="mgc_heart_line"></span>
    <span id="likeCount"></span>
    <script src="script.js"></script>
</body>

</html>

script.js

//いいね
let count = 0;

const likeButton = document.getElementById("like");

likeButton.addEventListener("click", function () {
    count++;
    const likeCountElement = document.getElementById("likeCount")
    likeCountElement.textContent = count;
})

補足

styles.cssは作ったものの、使いませんでした。

作ったもの

クリックするとカウントが増えます

この記事が気に入ったらサポートをしてみませんか？