그누보드 오른쪽 하단의 플로팅 화살표
본문
밑의 화살표를 다른 걸로 바꾸고 싶습니다.
폴더를 뒤져도 화살표 이미지가 안 나와서
코드가 어디에있는지 잘 모르겠네요.
혹시 아시는 분은 알려주시면 너무나 감사합니당__)
답변 2
/theme/basic/tail.php 약 63라인에서 아래 태그 지우고 원하시는 코드 넣으시면 됩니다.
<i class="fa fa-arrow-up" aria-hidden="true"></i>
""" 폴더를 뒤져도 화살표 이미지가 안 나와서 """
기존의 화살표는 이미지 파일이 아니라
CSS 스타일이나 아이콘(Font Awesome 등)으로 표시되는 것입니다.
""" 밑의 화살표를 다른 걸로 바꾸고 싶습니다. """ ( 해당 버튼: <button id="top_btn"> . . . </button> )
＊Font Awesome에서 제공하는 아이콘만 사용 가능하며, 원하는 디자인이 없을 수 있음.
<i class="fa fa-chevron-up"></i> <!-- 작은 위쪽 화살표 -->
<i class="fa fa-angle-up"></i> <!-- 각진 위쪽 화살표 -->
<i class="fa fa-caret-up"></i> <!-- 꺾인 화살표 -->
＊HTML에서 직접 "유니코드 기호/문자"를 사용할 수도 있음.
<button id="top_btn">▲</button> <!-- 삼각형 화살표 -->
<button id="top_btn">⬆</button> <!-- 화살표 기호 -->
<button id="top_btn">↑</button> <!-- 일반 화살표 -->
＊CSS로 가상 요소를 만들어 화살표(텍스트만 가능)를 표시할 수 있음.
- 기존 스타일 시트에 아래 코드를 추가하면 화살표 기호(▲)가 버튼 내에 표시 됨.
#top_btn::before {
content: "▲"; /* 원하는 기호 */
font-size: 20px;
display: inline-block;
}
＊더 세밀한 디자인이 필요하다면, SVG 이미지를 직접 버튼에 넣을 수도 있음.
<button id="top_btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 4L4 12H20L12 4Z" fill="black"/>
</svg>
</button>
- 한계점: SVG 코드를 직접 작성해야 하며, 브라우저 호환성을 확인해야 함.
