SimpleMDE 사용해서 마크다운 에디터 기능을 구현했는데요,
에디터 버튼 아이콘들이 원래 SimpleMDE 사이트나 다른 예제에서 본 것과는 많이 다른 모습입니다.
어떤 문제일까요?

simplemde.min.css랑 simplemde.mde.js 파일은 static 폴더에 아래와 같이 넣어주었습니다.

아래는 소스 코드들입니다.

<!-- question_list.html -->
{% extends 'base.html' %}
{% load pybo_filter %}
{% block content %}
<div class="container my-3">
    <div class="row my-3">
        <div class="col-6">
            <a href="{% url 'pybo:question_create' %}" class="btn btn-primary">질문 등록하기</a>
        </div>
        <div class="col-6">
            <div class="input-group">
                <input type="text" id="search_kw" class="form-control" value="{{ kw|default_if_none:'' }}">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="btn_search">찾기</button>
                </div>
            </div>
        </div>
    </div>
    <table class="table">
        <thead>
        <tr class="text-center table-dark">
            <th>번호</th>
            <th style="width:50%">제목</th>
            <th>글쓴이</th>
            <th>작성일시</th>
        </tr>
        </thead>
        <tbody>
        {% if question_list %}
        {% for question in question_list %}
        <tr class="text-center">
            <td>
                <!-- 번호 = 전체건수 - 시작인덱스 - 현재인덱스 + 1 -->
                {{ question_list.paginator.count|sub:question_list.start_index|sub:forloop.counter0|add:1 }}
            </td>
            <td class="text-start">
                <a href="{% url 'pybo:detail' question.id %}">{{ question.subject }}</a>
                {% if question.answer_set.count > 0 %}
                <span class="text-danger small mx-2">{{ question.answer_set.count }}</span>
                {% endif %}
            </td>
            <td>{{ question.author.username }}</td>
            <td>{{ question.create_date }}</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td colspan="3">질문이 없습니다.</td>
        </tr>
        {% endif %}
        </tbody>
    </table>
    <!-- 페이징처리 시작 -->
    <ul class="pagination justify-content-center">
        <!-- 이전페이지 -->
        {% if question_list.has_previous %}
        <li class="page-item">
            <a class="page-link" data-page="{{ question_list.previous_page_number }}"
               href="javascript:void(0)">이전</a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" aria-disabled="true"
               href="javascript:void(0)">이전</a>
        </li>
        {% endif %}
        <!-- 페이지리스트 -->
        {% for page_number in question_list.paginator.page_range %}
        {% if page_number >= question_list.number|add:-5 and page_number <= question_list.number|add:5 %}
        {% if page_number == question_list.number %}
        <li class="page-item active" aria-current="page">
            <a class="page-link" data-page="{{ page_number }}"
               href="javascript:void(0)">{{ page_number }}</a>
        </li>
        {% else %}
        <li class="page-item">
            <a class="page-link" data-page="{{ page_number }}"
               href="javascript:void(0)">{{ page_number }}</a>
        </li>
        {% endif %}
        {% endif %}
        {% endfor %}
        <!-- 다음페이지 -->
        {% if question_list.has_next %}
        <li class="page-item">
            <a class="page-link" data-page="{{ question_list.next_page_number }}"
               href="javascript:void(0)">다음</a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" aria-disabled="true"
               href="javascript:void(0)">다음</a>
        </li>
        {% endif %}
    </ul>
    <!-- 페이징처리 끝 -->
</div>
<form id="searchForm" method="get" action="{% url 'index' %}">
    <input type="hidden" id="kw" name="kw" value="{{ kw|default_if_none:'' }}">
    <input type="hidden" id="page" name="page" value="{{ page }}">
</form>
{% endblock %}
{% block script %}
<script type='text/javascript'>
const page_elements = document.getElementsByClassName("page-link");
Array.from(page_elements).forEach(function(element) {
    element.addEventListener('click', function() {
        document.getElementById('page').value = this.dataset.page;
        document.getElementById('searchForm').submit();
    });
});
const btn_search = document.getElementById("btn_search");
btn_search.addEventListener('click', function() {
    document.getElementById('kw').value = document.getElementById('search_kw').value;
    document.getElementById('page').value = 1;  // 검색버튼을 클릭할 경우 1페이지부터 조회한다.
    document.getElementById('searchForm').submit();
});
</script>
{% endblock %}

<!-- question_form.html -->
{% extends 'base.html' %}
{% block content %}
<div class="container">
    <h5 class="my-3 border-bottom pb-2">질문등록</h5>
    <form method="post" class="post-form my-3">
        {% csrf_token %}
        <!-- 오류표시 Start -->
        {% if form.errors %}
        <div class="alert alert-danger" role="alert">
            {% for field in form %}
            {% if field.errors %}
            <div>
                <strong>{{ field.label }}</strong>
                {{ field.errors }}
            </div>
            {% endif %}
            {% endfor %}
        </div>
        {% endif %}
        <!-- 오류표시 End -->
        <div class="mb-3">
            <label for="subject" class="form-label">제목</label>
            <input type="text" class="form-control" name="subject" id="subject"
                   value="{{ form.subject.value|default_if_none:'' }}">
        </div>

        <!-- SimpleMDE -->
<div class="form-group">
        <label for="content">내용</label>
        <textarea class="form-control" name="content" id="content"
                  rows="10">{{ form.content.value|default_if_none:'' }}</textarea>
         <script>
                var simplemde = new SimpleMDE({element: document.getElementById("content")});
            </script>
        </div>
<!-- SimpleMDE -->
        <button type="submit" class="btn btn-primary">저장하기</button>
    </form>
</div>
{% endblock %}

<!-- question_detail.html -->
{% extends 'base.html' %}
{% load pybo_filter %}
{% block content %}
<div class="container my-3">
    <!-- message 표시 -->
    {% if messages %}
    <div class="alert alert-danger my-3" role="alert">
        {% for message in messages %}
        <strong>{{ message.tags }}</strong>
        <ul>
            <li>{{ message.message }}</li>
        </ul>
        {% endfor %}
    </div>
    {% endif %}
    <!-- 질문 -->
    <h2 class="border-bottom py-2">{{ question.subject }}</h2>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text">{{ question.content|mark }}</div>
            <div class="d-flex justify-content-end">
                {% if question.modify_date %}
                <div class="badge bg-light text-dark p-2 text-start mx-3">
                    <div class="mb-2">modified at</div>
                    <div>{{ question.modify_date }}</div>
                </div>
                {% endif %}
                <div class="badge bg-light text-dark p-2 text-start">
                    <div class="mb-2">{{ question.author.username }}</div>
                    <div>{{ question.create_date }}</div>
                </div>
            </div>
            <div class="my-3">
                <a href="javascript:void(0)" data-uri="{% url 'pybo:question_vote' question.id  %}"
                   class="recommend btn btn-sm btn-outline-secondary"> 추천
                    <span class="badge rounded-pill bg-success">{{question.voter.count}}</span>
                </a>
                {% if request.user == question.author %}
                <a href="{% url 'pybo:question_modify' question.id  %}"
                   class="btn btn-sm btn-outline-secondary">수정</a>
                <a href="javascript:void(0)" class="delete btn btn-sm btn-outline-secondary"
                   data-uri="{% url 'pybo:question_delete' question.id  %}">삭제</a>
                {% endif %}
            </div>
        </div>
    </div>
    <!-- 답변 -->
    <h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
    {% for answer in question.answer_set.all %}
    <a id="answer_{{ answer.id }}"></a>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text">{{ answer.content|mark }}</div>
            <div class="d-flex justify-content-end">
                {% if answer.modify_date %}
                <div class="badge bg-light text-dark p-2 text-start mx-3">
                    <div class="mb-2">modified at</div>
                    <div>{{ answer.modify_date }}</div>
                </div>
                {% endif %}
                <div class="badge bg-light text-dark p-2 text-start">
                    <div class="mb-2">{{ answer.author.username }}</div>
                    <div>{{ answer.create_date }}</div>
                </div>
            </div>
            <div class="my-3">
                <a href="javascript:void(0)" data-uri="{% url 'pybo:answer_vote' answer.id  %}"
                   class="recommend btn btn-sm btn-outline-secondary"> 추천
                    <span class="badge rounded-pill bg-success">{{answer.voter.count}}</span>
                </a>
                {% if request.user == answer.author %}
                <a href="{% url 'pybo:answer_modify' answer.id  %}"
                   class="btn btn-sm btn-outline-secondary">수정</a>
                <a href="javascript:void(0)" class="delete btn btn-sm btn-outline-secondary "
                   data-uri="{% url 'pybo:answer_delete' answer.id  %}">삭제</a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
    <form action="{% url 'pybo:answer_create' question.id %}" method="post" class="my-3">
        {% csrf_token %}
        {% include "form_errors.html" %}
        <div class="mb-3">
            <label for="content" class="form-label">답변내용</label>
            <textarea {% if not user.is_authenticated %}disabled{% endif %}
                      name="content" id="content" class="form-control" rows="10"></textarea>
        </div>
        <input type="submit" value="답변등록" class="btn btn-primary">
    </form>
</div>
{% endblock %}
{% block script %}
<script type='text/javascript'>
const delete_elements = document.getElementsByClassName("delete");
Array.from(delete_elements).forEach(function(element) {
    element.addEventListener('click', function() {
        if(confirm("정말로 삭제하시겠습니까?")) {
            location.href = this.dataset.uri;
        };
    });
});
const recommend_elements = document.getElementsByClassName("recommend");
Array.from(recommend_elements).forEach(function(element) {
    element.addEventListener('click', function() {
        if(confirm("정말로 추천하시겠습니까?")) {
            location.href = this.dataset.uri;
        };
    });
});
</script>
{% endblock %}

<!-- base.html -->
{% load static %}
<!doctype html>
<html lang="ko">
<head>
    <script src="{% static 'simplemde.min.js' %}"></script>
    <script>
        var simplemde = new SimpleMDE({element: document.getElementById("content")});
    </script>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
    <!-- pybo CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
    <title>Hello, pybo!</title>
</head>
<body>
<!-- 네비게이션바 -->
{% include "navbar.html" %}
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->

<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
<!-- 자바스크립트 Start -->
{% block script %}
{% endblock %}
<!-- 자바스크립트 End -->
</body>
</html>