HTMLでなぜかアイコンが無数に反映される

前提

ここに質問の内容を詳しく書いてください。
HTMLで画像編集アプリを作成しています。
その際にとんでもない数のアイコンが表示されます。
どうしたらいいですか?
HTMLに詳しい方すみませんが、宜しくお願いします。イメージ説明

実現したいこと

ここに実現したいことを箇条書きで書いてください。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML <!DOCTYPE html> <!-- Coding By Tak --> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Image Editor JavaScript | Tak</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- BoxIcon & FontAwesome Links For Icons --> <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/> </head> <body> <div class="container"> <h2>Easy Image Editor</h2> <div class="wrapper"> <div class="editor-panel"> <div class="filter"> <label class="title">Filters</label> <div class="options"> <button>Brightness</button> <button>Saturation</button> <button>Inversion</button> <button>Grayscale</button> </div><!-- .options --> <div class="slider"> <div class="filter-info"> <p class="name">Brightness</p> <p class="value">100%</p> </div><!-- .filter-info --> <input type="range" value="100" min="0" max="200"> </div><!-- .slider --> </div><!-- .filter --> <div class="rotate"> <label class="title">Rotate & Filp</label> <div class="options"> <button><i class="fa-solid fa-rotate-left"></i></button> <button><i class="fa-solid fa-rotate-right"></button> <button><i class="bx bx-reflect-vertical"></button> <button><i class="bx bx-reflect-horizontal"></button> </div><!-- .options --> </div><!-- .rotate --> </div><!-- .editor-panel --> <div class="preview-img"></div><!-- .preview-img --> </div><!-- .wrapper --> </div><!-- .container --> </body> </html>

試したこと

コードを書き直しましたが一向に改善されません。詳しい方すみませんが、宜しくお願いします。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント