webpack 8 - garevna/js-course GitHub Wiki

💼 Упражнение 8

Подключение шрифтов

Google Fonts

Для начала импортируем некоторые шрифты Google, используя внешний URL

Для этого в наш файл 📝 main.css мы добавим строчку

@import url("https://fonts.googleapis.com/css?family=Hanalei+Fill|Roboto");

Теперь можно использовать эти шрифты
( 'Hanalei Fill', Roboto )
в своих стилях
Установим шрифт 'Hanalei Fill' для элемента body
и шрифт Roboto для .sampleClass

Дополнительно ( для самостоятельного изучения ):

📝 main.css

@import url("https://fonts.googleapis.com/css?family=Hanalei+Fill|Roboto:100,300,400");

body {
    position: fixed;
    top: 0;
    left:0;
    bottom:0;
    right:0;
    background-image: url(../images/columns.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    font-family: monospace, Arial;
    font-size: 16px;
    color: #abc;
    font-family: 'Hanalei Fill', cursive;
}
.sampleClass {
    font-family: Roboto;
    font-size: 25px;
    font-weight: bold;
}
.git-bush, .git {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.git-bush {
    background-image: url(../images/git-bush.png);
}
.git {
    background-image: url(../images/git.png);
}

👁‍🗨 Если вебпак находится в режиме отслеживания, перезагрузите станицу и вы увидите результат

Font Awesome

Самый простой способ подключения иконок Font Awesome - импорт в 📝 main.css:

@import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css");

После этого можно вставить 📝 index.html, например, такую строчку:

<i class="fas fa-ambulance"></i>

Обновите страницу и вы увидите добавленную иконку