При размещении иконки Font Awesome в разметке появились дополнительно 4 иконки в разных частях разметки

@Mihail51 · Регистрация: 09.06.2018

Студворк — интернет-сервис помощи студентам

При размещении иконки Font Awesome в <h2> одной из секций разметки HTML (строка 62) появились ещё 4 иконки в разных частях сайта, причём, иконки появились только в броузере, в Sublime Text 3 разметки этих иконок нет. При отключении CSS иконки сохраняются. Иконки, размещённые в другом блоке - без таких проблем.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>My Portfolio</title>
    <meta name="description" content="описание не длиннее 155 символов">
    <meta name="keywords" content="мета-теги, шаблон, html, css">
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">  
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700|Roboto:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">   
 
 
    <script src="https://use.fontawesome.com/ae31721f99.js"></script>
 
</head>
<body>
    <ul class="borger top__border">
        <li class="border_item border__item1"></li>
        <li class="border_item border__item2"></li>
        <li class="border_item border__item3"></li>
        <li class="border_item border__item4"></li>
        <li class="border_item border__item5"></li>
        <li class="border_item border__item6"></li>
    </ul>
    <div class="wrapper">
        <main>
            <h1 class="visually-hidden">Portfolio by Gofman Mihail</h1>
            <header class="header main__header">
                <img src="img/WIN_20200314_15_54_39_Pro.jpg" alt="Foto" class="header__image">
                <ul class="name header__name">
                        <li class="greeting">Hi, I&apos;m <span class="greeting__name">Jhon Jeffer</span></li>
                        <li class="specialty">Creative Designer</li>
                        <li class="specialization">Web, Mobile App UI/UX, Motion </li>
                </ul>
                <nav class="menu header__menu">
                    <ul class="header__menu_items">
                        <li class="header__menu_item header__menu_item_1">
                            <a href="#"><i class="fa fa-id-card-o" aria-hidden="true"></i>&nbsp; Profile</a>
                        </li>
                        <li class="header__menu_item header__menu_item_2">
                            <a href="#"><i class="fa fa-bars" aria-hidden="true"></i>&nbsp; Resume</a>
                        </li>
                        <li class="header__menu_item header__menu_item_3">
                            <a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i>&nbsp; Portfolio</a>
                        </li>
                        <li class="header__menu_item header__menu_item_4">
                            <a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp; Services</a>
                        </li>
                        <li class="header__menu_item header__menu_item_5">
                            <a href="#"><i class="fa fa-comments-o" aria-hidden="true"></i>&nbsp; Testimonials</a>
                        </li>
                        <li class="header__menu_item header__menu_item_5">
                            <a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp; Contacts</a>
                        </li>
                    </ul>
                </nav>
            </header>
            <section class="profile main__profile">
                <h2 class="profile__title"><i class="fa fa-id-card-o" aria-hidden="true">Profile</h2>
                <div class="about">
                    <img src="img/WIN_20200314_15_54_39_Pro.jpg" alt="" class="about__image">
                    <ul class="about__info"></ul>
                </div>
                <hr class="profile__line">
                <p class="profile__text"></p>
                <div class="choose">
                    <ul class="choose__items">
                        <li class="coose__item"></li>
                        <li class="coose__item"></li>
                        <li class="coose__item"></li>
                        <li class="coose__item"></li>
                        <li class="coose__item"></li>
                        <li class="coose__item"></li>
                    </ul>
                </div>
                <ul class="fun-fact">
                    <li class="fun-fact__item"><span></span></li>
                    <li class="fun-fact__item"><span></span></li>
                    <li class="fun-fact__item"><span></span></li>
                    <li class="fun-fact__item"><span></span></li>
                </ul>
            </section>
            <aside class="technical main__technical"></aside>
            <footer class="footer main__footer"></footer>
        </main>
    </div>
 
</body>
</html>

Вот скриншот :

@mrtoxas · 15.03.2020, 21:15

Закрывающий тег </i> пропустили в 62й строке

HTML5
1
<h2 class="profile__title"><i class="fa fa-id-card-o" aria-hidden="true"></i>Profile</h2>

@Mihail51 · 15.03.2020, 23:54 **[ТС]**

Да, всё правильно. Спасибо! Два вечера потратил...

Новые блоги и статьи Все статьи Все блоги /
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений в EXE. Здесь описаны базовые шаги для старта программирования с помощью CMake и MinGW. Для набора. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .

@Mihail51 0 / 0 / 0 Регистрация: 09.06.2018 Сообщений: 41
	15.03.2020, 23:54 [ТС]
	Да, всё правильно. Спасибо! Два вечера потратил... 0

При размещении иконки Font Awesome в разметке появились дополнительно 4 иконки в разных частях разметки

Решение