가이드/디자인/버튼에 아이콘 추가

버튼에 아이콘 추가

버튼에 아이콘 또는 이미지를 추가할 수 있습니다. 예: 클릭하여 통화하기 버튼의 전화아이콘(📞),이메일아이콘(📧),더 보기 버튼의 화살표(⬅️ ➡️) 등등 무엇이든 가능합니다. 이 가이드에서 버튼에 아이콘을 추가하는 방법을 알아보세요.

사용할 아이콘 찾기

회원님의 사이트에서 사용할 수 있는 이미지 또는 아이콘을 찾아볼 수 있는 사이트가 많이 있습니다. 다음은 몇 가지 예입니다.

  • Windows, Mac 및 모바일 장치에는 대부분 버튼에 추가할 수 있는 이모티콘이 내장되어 있습니다.
  • Get Emoji와 같은 사이트의 이모티콘을 복사할 수도 있습니다.
  • Google Fonts에는 아이콘 옵션이 포함되어 있습니다.
  • Font Awesome은 무료 및 유료 아이콘이 있는 인기 사이트입니다.

이미지를 사용하는 경우에는 SVG 또는 PNG(투명) 파일 형식이 좋습니다. 버튼을 추가하기 전에 미디어 라이브러리에 아이콘을 업로드하거나, 버튼을 추가하면서 아이콘을 업로드할 수 있습니다.

버튼에 아이콘 추가

버튼 블록직접 선택한 아이콘을 사용하여 워드프레스닷컴의 버튼에 아이콘 또는 이미지를 추가할 수 있습니다. 버튼에 아이콘을 추가하려면 다음 단계를 따르세요.

  1. 버튼을 추가하고 버튼의 텍스트와 링크를 포함합니다.
  2. 버튼을 클릭하고 텍스트 앞 또는 뒤에 커서를 놓습니다.
  3. 이모티콘 또는 이미지를 사용하는지에 따라 다릅니다.
    • 이모티콘: Windows 또는 Mac의 키보드 단축키를 사용하여 이모티콘을 선택합니다. Get Emoji와 같은 사이트에서 이모티콘을 복사하여 붙여 넣습니다.
    • 이미지: 표시되는 도구 모음에서 아래쪽 화살표(더 보기)를 클릭하고 “인라인 이미지” 옵션을 선택합니다.
      • 본인의 미디어 라이브러리에서 이미지를 선택하거나 새 이미지를 업로드합니다.
      • 이미지를 두 번 클릭하여 이미지 크기를 변경하고 대체 텍스트를 추가합니다.
  4. 저장 또는 발행을 클릭하여 변경 사항을 저장합니다.

다음 예에서는 Mac 키보드 단축키를 사용하여 이모티콘을 추가합니다. Windows 키보드 단축키를 사용하거나 다른 사이트에서 이모티콘을 복사하여 붙여 넣을 수도 있습니다.

Copied to clipboard!