h3标签输出2行，且Font Awesome图标不显示。

问题描述 投票：0回答：1

我在HTML5中遇到了一个问题 <h3> 标签和旁边的Font Awesome图标的标签。

让我来带大家了解一下这个问题。首先，这是我为一个产品选择页面编写的代码。它包含了大尺度的Font Awesome图标和 <h3> 标签下的每个图标。当然，页面在Bootstrap 4的网格中被划分为两列。每一列都包含了图标和文本，但第一个问题是当键入 <h3> 标签；在第二列中，它分两行输出。

我的意思是。

PC

第二个问题是大部分的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/[email protected]/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个项目显示，而所有项目在PC端显示。如何像这样排列项目？

手机：手机。

phones

电脑

computer

html css twitter-bootstrap
1个回答
0
投票

  1. 好吧，对于你的第一个问题，如果你注意到在一个有一个字，而在第二个你有两个字。所以h3的宽度只是把文字包到下一行，因为它没有足够的空间。增加宽度或减小字体大小，但多余的文字总是会被包起来。

  2. 确保你的样式文件是正确的（链接）。其次，它是在相关的标签中，你没有缺少图标代码。

  3. 请访问 w3Schools 你可以在那里找到代码。

    一定要分享一些代码，这样你会得到更好的帮助。没有人会帮你写代码。所以，对于你的第三个问题，下次分享代码片段，这将会有很大的帮助。现在，你可以使用上面的链接，根据你的要求调整它。)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.