[Vanilla JS] 동적으로 할당된 객체에 FontAwesome 아이콘 삽입

 

<문제상황: js에서 FontAwesome 아이콘 삽입 방법>

 나는 현재 사용자가 입력한 텍스트를 li 객체에 동적으로 할당하여 보여주는 프로젝트를 진행중이다. 각 li 객체 내부에  쓰레기통 아이콘도 넣어, 삭제 연산을 하도록 하려는데, FontAwesome에서 제공하는 아이콘을 어떻게 삽입해야하는지 알 수가 없었다.

(기존에 새로 만든 객체에 속성을 부여하듯이 element.class = "아이콘 값"이라고 입력도 해보았으나, 역시 틀린 답이었다.ㅎㅎ)

#위 이미지 클릭시 해당 이미지의 fontawesome 페이지로 연결됨

 

 

<해결: innerHTML, setAttribute()의 사용>

 이미 나와 같은 문제에 마주쳤던 사람들이 있어 다행히 두가지의 해결 방안을 금방 얻을 수 있었다. deleteBtn이라는 새로운 객체를 만들고 난 이후의 코드이다.

 

1. innerHTML을 이용

deleteBtn.innerHTML = '<i class="far fa-trash-alt"></i>'

2. setAttribute()를 이용

deleteBtn.setAttribute("class", "fa fa-trash-o-alt");

 

 

<결과 화면>

쓰레기통 아이콘이 잘보인다ㅜㅜ!!!!!

 

 

<참고 사이트>

https://breathtaking-life.tistory.com/26

 

 

[ Nico의 바닐라 JS로 크롬앱 만들기 - review project ]