---
title: "#아이콘 #이모지 #웹 #개발환경"
url: "https://notes.junghanacs.com/notes/20230623T125000"
author: "Junghan Kim"
date: "2023-06-23T12:50:00+09:00"
lastmod: "2025-03-28T00:00:00+09:00"
tags: ["development","web"]
description: "How to trim the FontAwesome JS for your website, using Emacs Lisp."
---

> [!abstract] 이 노트에 대하여
> 
> 웹 환경에서 아이콘과 이모지를 폰트 외 방식으로 다루는 방법을 찾으며 관련 설정과 참고 글을 모은다. Hugo·웹 퍼블리시 흐름에서 시각 요소를 안정적으로 넣기 위한 탐색의 출발점이다.

## 히스토리

-   [|2025-03-28 Fri 02:31|](https://notes.junghanacs.com/journal/20250324T000000#h-2025-03-28) 랜덤노트 만남. 수정 바라요
-   2024-09-11 수정 #랜덤노트
-   2024-06-20 기록
-   2023-06-23 나는 폰트로 넣는 것 제외하고 뭔가 웹 하는 사람들이 제대로 하는 방법을 모른다. 어떻게 해야 하는가? 여기에 대한 답은 아래에 있다. 먼저, 한글로 작성된 설명글이다. 그 다음에 ox-hugo 만든 분의 기록이 있다. 아마 따라 가면 잘 될 것이다. 일단 이 정도로 기록해 놓는다.

## enableEmoji 가 무엇이냐?!

enableEmoji: true hugo 에서 지원해주는 시스템이 있다는 이야인데

/home/junghan/git/scripter.co/content-org/scripter-posts.org

## Font-awesome 5 사용법 (한글)

<https://www.daleseo.com/font-awesome/>

## Optimize your FontAwesome

This post briefly goes through the FontAwesome 5 setup, the problem statement and a solution for that.

I signed up for the [FontAwesome 5 Pro Kickstarter](https://www.kickstarter.com/projects/232193852/font-awesome-5), and I have to say that this is one of my few Kickstarter fundings that delivered really well!

<div class="verse">

&nbsp;&nbsp;&nbsp;&nbsp;_Thank you FontAwesome!_<br />

</div>

### FontAwesome 5 Setup

FontAwesome 5 supports an awesome new way of loading icons, using [SVG with JS](https://fontawesome.com/get-started/svg-with-js). The benefit is that you simply load one `fontawesome-all.js` file and _everything just works_!.

```html
<head>
  <!--load everything-->
  <script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>
<body>
  <!--icon-->
  <i class="fas fa-user"></i>
</body>
```
<div class="src-block-caption">
  <span class="src-block-number">[Code Snippet 1](https://notes.junghanacs.com/notes/20230623T125000#code-snippet--fa-setup):</span>
  Fontawesome 5 Setup
</div>

### Problem

With FontAwesome 5 Pro, I get about 2700 icons packed in that `fontawesome-all.js`. While that is great, there are 2 issues:

1.  I don't need all of those 2700 icons on my site. That file is roughly 1.7 **MB** (minified or not) which I need not unnecessarily load for all my visitors.
2.  Anyone can easily pirate the whole JS file and use it for free!

### Solution

The solution is simple --- I just comment out all the lines with SVG code for the icons that I don't use.

But searching for the icons I need in all the icon packs (Solid, Regular, Light, Brand) in that single 5k+ line JS file is not fun, especially when I want to add/remove icons occasionally.

And so `fontawesome-choose` was born!

-   I list the icons I need in `fontawesome-choose-icons`.
-   Run `M-x fontawesome-choose` in the `fontawesome-all.js` file buffer.

The code is in the next section, but you can also find the latest version [in my repo](https://github.com/kaushalmodi/.emacs.d/blob/master/elisp/misc/fontawesome-choose.el).

_Note that while I have used this on Fontawesome 5 Pro, it should work just as well on Fontawesome 5 Free too._

### Code

```emacs-lisp
;; Helper function `fontawesome-choose' used to uncomment only the
;; icons the user cares about in `fontawesome-all.js'.

(defconst fontawesome-choose-icons '("list-alt" ;categories
                                     "tags"
                                     "rss"
                                     "link"
                                     "heart" ;like
                                     "reply"
                                     "retweet"
                                     "github" ;"github-alt" "github-square"
                                     "twitter" ;"twitter-square"
                                     "gitlab")
  "List of icons to choose from fontawesome-all.js.
Used in `fontawesome-choose'.")

(defun fontawesome-choose ()
  "Comment out all icons in fontawesome-all.js except the selected few.

Minifying the resultant .js will then remove the commented icons,
thus drastically reducing the minified JS size.

Set the `fontawesome-choose-icons' variable to the list of icons
that you want to keep uncommented."
  (interactive)
  (let ((case-fold-search nil)
        (count 0))
    (save-excursion
      (goto-char (point-min))
      (while (re-search-forward "^var icons" nil :noerror)
        (let ((begin (progn
                       (forward-line 1)
                       (point)))
              end)
          (re-search-forward "^\\};")
          (forward-line 0)
          (backward-char 1)
          (setq end (point))
          ;; First comment all the lines
          (save-excursion
            (narrow-to-region begin end)
            (goto-char (point-min))
            (while (re-search-forward "^\\s-*\\(\"\\)" nil :noerror)
              (replace-match "// \\1" nil nil nil 1))
            (widen))
          ;; Now uncomment only the selected icons
          (save-excursion
            (narrow-to-region begin end)
            (goto-char (point-min))
            (let* ((icon-regexp (regexp-opt fontawesome-choose-icons 'symbols))
                   (regexp (format "^\\s-*\\(//\\s-*\\)\"%s\":" icon-regexp)))
              (while (re-search-forward regexp nil :noerror)
                (replace-match "" nil nil nil 1)
                (setq count (1+ count))))
            (widen))))
      (message "fontawesome-choose: Uncommented %d icons matching %S"
               count fontawesome-choose-icons))))
```
<div class="src-block-caption">
  <span class="src-block-number">[Code Snippet 2](https://notes.junghanacs.com/notes/20230623T125000#code-snippet--fontawesome-choose):</span>
  <code>fontawesome-choose</code> &mdash; Comment out all the FontAwesome icons you don't need
</div>

### Result

This solution solves the first problem wonderfully --- After minification, `fontawesome-all.js` is just 71 **KB** (down from 1.7 **MB**).

That's a 25x factor reduction! The minification step is important because that removes all the commented lines from the JS. I do the minification using [`tdewolff/minify`](https://github.com/tdewolff/minify).

The second problem, that of piracy, is difficult to solve completely using this. But whoever pirates this _reduced_ FontAwesome from my site won't get the real deal :sunglasses:.

Emacs-Lisp saves the day once again!

## 관련노트

## BIBLIOGRAPHY