타운광장토픽게시판

 

이모지를 사이트 디자인 요소로 사용할 경우 OS 마다 다르게 표현되는 단점이 있어서 이런 경우 트위터의 이모지 세트를 사용할 수 있는 방법을 찾았습니다. (개인적으로는 윈도우 이모지가 제일 마음에 드는데 웹폰트가 없더군요)

 

https://github.com/twitter/twemoji

 

사용법은

1. 헤드 태그에 추가 

<head>

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous">

</script>

</head>

 

2. 바디 태그 바로 아래에 추가

<script> + document.getElementsByTagName("body")[0].innerHTML=twemoji.parse(document.getElementsByTagName("body")[0].innerHTML)

</script>

 

(슬프게도 저는 바디 태그 바로 아래가 어딘지 못찾아서 레이아웃 적당히 말미에 넣었더니 되긴 되는데 일부 애드온이 미출력)

 

그리고 2단계까지만 적용하면 이모지 크기가 굉장히 커서 조정이 필요합니다.

 

img.emoji { height: 1.1em; width: 1.1em; margin: 0 .05em 0 .1em; vertical-align: -0.1em; }

 

--

장점은 OS나 브라우저를 가리지 않고 일관된 이모지 표현

단점은 관리자가 아닌 일반 사용자가 입력한 이모지와 출력되는 이모지가 다르겠죠.

 

 

  • profile
    좋은 정보 감사합니다 !!