[javascript] Toastr와 함께 사용하는 아이콘 라이브러리

20 Dec 2023

javascript

Toastr는 사용자에게 메시지나 경고를 보여주는 데 사용되는 경량의 알림 라이브러리입니다. 그러나 Toastr에는 기본적으로 아이콘을 제공하지 않기 때문에, 사용자에게 더욱 시각적으로 효과적으로 메시지를 전달하기 위해 아이콘 라이브러리를 함께 사용하는 것이 좋습니다.

1. Font Awesome 사용하기

Font Awesome는 각종 벡터 아이콘을 제공하는 라이브러리로, Toastr와 함께 사용하기에 적합합니다.

먼저, Font Awesome를 웹페이지에 추가합니다:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  </head>
  <body>
    <script src="toastr.js"></script>
    <script>
      // Toastr 사용 예시
      toastr.info('<i class="fas fa-info-circle"></i> 이 메시지는 정보입니다.');
    </script>
  </body>
</html>

위 예제에서 fas fa-info-circle는 Font Awesome의 정보 아이콘을 나타냅니다.

2. 다른 아이콘 라이브러리 사용하기

Font Awesome 이외에도, Toastr와 함께 사용할 수 있는 다른 아이콘 라이브러리들이 있습니다. 예를 들어, Material Icons와 Ionicons도 좋은 선택지입니다.

<!DOCTYPE html>
<html>
  <head>
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Toastr CSS -->
    <link href="toastr.css" rel="stylesheet">
  </head>
  <body>
    <script src="toastr.js"></script>
    <script>
      // Toastr 사용 예시
      toastr.success('<i class="material-icons">check_circle</i> 작업이 완료되었습니다.');
    </script>
  </body>
</html>

결론

Toastr는 알림을 표시할 때 아이콘을 함께 사용하면 사용자에게 훨씬 더 명확하고 시각적으로 중요한 정보를 전달할 수 있습니다. Font Awesome, Material Icons 또는 Ionicons와 같은 다양한 아이콘 라이브러리를 Toastr와 함께 사용하여 사용자 경험을 향상시킬 수 있습니다.

참고: