아래 사이트에 접속한다.
https://www.favicon-generator.org/
Favicon & App Icon Generator
Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.
www.favicon-generator.org
원하는 이미지를 넣고, Create Favicon 버튼을 클릭하여 다운로드 한다.
아래 태그를 index.html의 head태그 안에 삽입한다.
<link rel="icon" href="./favicon.ico">
아래 페이지로 이동한다.
https://fontawesome.com/v4/get-started/
Get Started with Font Awesome
Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des
fontawesome.com
아래 설명대로 소스에 적용한다.
아래 페이지로 이동한다.
https://fonts.google.com/specimen/Ubuntu
Ubuntu - Google Fonts
The Ubuntu Font Family are a set of matching new libre/open fonts in development during 2010-2011. The development is being funded by Canonical Ltd on behalf th
fonts.google.com
Ubuntu서체를 Select하고 <link>를 선택해 index.html의 head태그 아래 삽입한다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
결과물
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="./favicon.ico">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>'정리 > Vue.js' 카테고리의 다른 글
| Vue.js [Mixed spaces and tabs]에러 수정 (0) | 2023.10.25 |
|---|---|
| Vue.js npm run serve시에 [Failed to resolve loader: sass-loader]에러 수정 (0) | 2023.10.19 |
| Vue.js 싱글 파일 컴포넌트 사용법 (1) | 2023.09.26 |
| Vue Cli란? (0) | 2023.09.25 |
| Vue.js 템플릿 문법 - watch (0) | 2023.09.22 |