У меня есть проблема в теге HTML5 <h3> и тегах Font Awesome icon рядом с этим.
Позвольте мне рассказать вам о проблеме. Перво-наперво, это мой код для страницы выбора продукта. Он содержит крупный значок Font Awesome и тег <h3> под каждым значком. Конечно, страница разделена на Bootstrap 4 сетки на два столбца. Каждый столбец содержит значок и текст, но первая проблема заключается в наборе значения тега <h3>; во втором столбце выводится в две строки.
Под этим я подразумеваю:
Вторая проблема заключается в том, что большинство значков Font Awesome не отображаются не даже поле.
main. php
<?
?>
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<style>
.padding-0{
padding-right:0;
padding-left:0;
}
.padding-1{
padding-right:0;
padding-left:1px;
}
</style>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Jquery JavaScripts -->
<!-- Navbar Bootstrap 4 -->
<nav class="navbar navbar-light navbar-fixed-top pulse-header">
<ul class="nav navbar-nav navbar-nav-left">
<li class="nav-item"><a href="#" class="open-pulse-sidebar"><i class="ion-grid pulse-icons"></i></a></li>
</ul>
<ul class="nav navbar-nav float-xs-right">
<li class="nav-item"><a href="#" class="toggle-search"><i class="ion-ios-search-strong pulse-icons"></i></a></li>
<li class="nav-item">
<a href="#" class="open-notification-sidebar">
<i class="ion-earth pulse-icons"></i>
<span class="pulse-circle"></span>
</a>
</li>
<li class="nav-item"><a href="#" class="open-chat-sidebar"><i class="ion-chatboxes pulse-icons"></i></a></li>
</ul>
<img src="https://jsfiddle.net/img/logo.png" class="m-sm-auto">
</nav>
<!-- Main Page for Pharmacy Order Selection -->
<div class="row">
<!-- color:#3AAFA9 -->
<div class="col-sm-6 padding-0">
<div class="container cont">
<div class="content content">
<div style="font-size: 100px;">
<i class="fa fa-medkit fa-2x hover"></i>
<br>
<h3 class="drugs">أدوية</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-6 padding-1">
<div class="container cont">
<div class="content content">
<div style="font-size: 100px;">
<i class="fas fa-tablets fas-2x hover"></i> <!--- here font awesome icon not showing -->
<br>
<h3 class="medicalequi">معدات طبية</h3>
</div>
</div>
</div>
</div>
</div>
<!--- Main Page Order Selection latest Tag -->
</body>
</html>
Css Код: [mainstyle.css]
@font-face {
font-family: "hana";
src: url("fonts/hana.ttf");
}
@media screen and (max-width : 1500px) {
.hover {
color:#FEFFFF;
position: absolute;
top:-100px;
left:-50px;
transition: all .2s ease-in-out;
}
.drugs{
position:absolute;
left:20px;
font-family:hana;
color:#FEFFFF;
transition: all .2s ease-in-out;
}
.medicalequi{
position:absolute;
right:-130px;
font-family:hana;
color:#FEFFFF;
transition: all .2s ease-in-out;
}
.cont{
background-color:#17252A;
height:43rem;
}
}
@media screen and (min-width: 320px) and (max-width: 480px) {
.hover {
color:#FEFFFF;
position: absolute;
top:-280px;
left:-220px;
transition: all .2s ease-in-out;
}
.drugs{
position:absolute;
left:-150px;
top:-40px;
font-family:hana;
color:#FEFFFF;
transition: all .2s ease-in-out;
}
.medicalequi{
position:absolute;
left:-150px;
top:-40px;
font-family:hana;
color:#FEFFFF;
transition: all .2s ease-in-out;
}
.cont{
background-color:#17252A;
height:25rem;
}
}
.content {
position: absolute;
left: 300px;
top: 344px;
}
.hover:hover{
color:#DEF2F1;
cursor:grab;
transform: scale(1.2);
}
.medicalequi:hover{
color:#DEF2F1;
cursor:grab;
transform: scale(2.5);
}
.drugs:hover{
color:#DEF2F1;
cursor:grab;
transform: scale(2.5);
}
/* CSS for Navbar */
.pulse-header {
height: 60px;
min-height: 60px;
max-height: 60px;
background-color: #1f2532;
padding: 13px 15px;
}
.pulse-header .navbar-nav-left {
margin-left: 0px;
}
.pulse-header .nav > .nav-item {
margin-right: -50px;
}
.pulse-header .nav > .nav-item > a {
position: relative;
}
.navbar img {
margin: 0px auto;
display:block;
}
Последняя вещь - bootstrap 4 отзывчивых навбара. Мне нужен пример для панели навигации, которая содержит более 4 элементов, 2 элемента отображаются при серфинге со смартфона и все элементы отображаются в P C. Как выровнять такие элементы?
Телефоны:
Компьютер:
