블로그에 트위터 이모지 적용하기

2023.05.10 00:22

트위터에서 트위모지(Twemoji)를 무료로 배포했다😀

구글링해보니 이모지를 png로 적용하는 방법은 간단하게 나와있는데 svg는 없더라

깔끔한 벡터 이미지로 바꾸고 싶어 git🔗을 뒤지다가 방법을 발견해 공유

HTML

스크립트를 CDN 방식으로 가져온다.

<head>에 해당 스크립트 삽입한다.

<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>

 

<body>에 다음 스크립트를 삽입한다.

{}로 묶여있는 부분이 확장자를 svg로 바꾸어주는 부분이다.

<script>
	$(function() {
		document.getElementsByTagName("body")[0].innerHTML
		= twemoji.parse(
			document.getElementsByTagName("body")[0].innerHTML,
			{ folder:'svg', ext:'.svg' }
		);
	});
</script>

CSS

이모지 태그에 스타일을 적용한다.

img.emoji {
	width: 1em;
	margin: 0 2px;
}

 

적용 완.

⭐🌙💗💖💞💝🎁🥰😘❤️💛💚💙💜🤍

티스토리툴바