sameh Mansour
Reputation: 3
How do I add small text in H1 tag in html?
I am trying to add small text within the H1 tags at the same time adding an icon before the text, but unfortunately it is not working, I have two issue in the same h1 tag in the header class noting that I am building my site using bootstrap framework :
- Small tag is not working inside h1 tag
- Glyph icons are not being added using bootstrap inside the same h1 tag.
Below is the code I am using:
body{
background: #f4f4f4;
}
.navbar-nav{
min-height: 33px !important;
margin-bottom: 0;
border-radius: 0;
}
.navbar {
background-color: #e74c3c;
}
.navbar .navbar-brand {
color: #ecf0f1;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ffbbbc;
}
.navbar .navbar-text {
color: #ecf0f1;
}
.navbar .navbar-text a {
color: #ffbbbc;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
color: #ffbbbc;
}
.navbar .navbar-nav .nav-link {
color: #ecf0f1;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #ffbbbc;
}
.navbar .navbar-nav .dropdown-menu {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar .navbar-nav .dropdown-menu .dropdown-divider {
border-top-color: #c0392b;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar .navbar-toggler {
border-color: #c0392b;
}
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
background-color: #c0392b;
}
.navbar .navbar-toggler .navbar-toggler-icon {
color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
border-color: #ecf0f1;
}
.navbar .navbar-link {
color: #ecf0f1;
}
.navbar .navbar-link:hover {
color: #ffbbbc;
}
.main-color-bg{
background-color: #e74c3c;
border-color: #c0392b;
color:#ffffff;
}
@media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
@media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
@media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.79.0">
<title>ِAdmin Area Dashboard</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">AdminStrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="index.html">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages.html">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="posts.html">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="users.html">Users</a>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="index.html">Welcome, Sameh</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Logout</a>
</li>
</ul>
<!--
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
-->
</div>
</div>
</nav>
<header id="header">
<div class="container">
<div class="row">
<div class="col-md-10">
<h1> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Dashboard <small>Manage Your Site</small></h1>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</header>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>Upvotes: 0
Views: 698
Answers (1)
Java
Reputation: 91
I checked your codes. It seems like there is a problem on bootstrap version you're using. I removed both of your bootstrap links and added one. I also added Mansi's comment to make the icon be resizeable. You can check from below snippet
body{
background: #f4f4f4;
}
h1 span.glyphicon-cog{
font-size: 0.5em;
vertical-align: 5px;
}
.navbar-nav{
min-height: 33px !important;
margin-bottom: 0;
border-radius: 0;
}
.navbar {
background-color: #e74c3c;
}
.navbar .navbar-brand {
color: #ecf0f1;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ffbbbc;
}
.navbar .navbar-text {
color: #ecf0f1;
}
.navbar .navbar-text a {
color: #ffbbbc;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
color: #ffbbbc;
}
.navbar .navbar-nav .nav-link {
color: #ecf0f1;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #ffbbbc;
}
.navbar .navbar-nav .dropdown-menu {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar .navbar-nav .dropdown-menu .dropdown-divider {
border-top-color: #c0392b;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar .navbar-toggler {
border-color: #c0392b;
}
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
background-color: #c0392b;
}
.navbar .navbar-toggler .navbar-toggler-icon {
color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
border-color: #ecf0f1;
}
.navbar .navbar-link {
color: #ecf0f1;
}
.navbar .navbar-link:hover {
color: #ffbbbc;
}
.main-color-bg{
background-color: #e74c3c;
border-color: #c0392b;
color:#ffffff;
}
@media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
@media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
@media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.79.0">
<title>ِAdmin Area Dashboard</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/starter-template/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Bootstrap core CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">AdminStrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="index.html">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages.html">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="posts.html">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="users.html">Users</a>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="index.html">Welcome, Sameh</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Logout</a>
</li>
</ul>
<!--
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
-->
</div>
</div>
</nav>
<header id="header">
<div class="container">
<div class="row">
<div class="col-md-10">
<h1> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Dashboard <small>Manage Your Site</small></h1>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</header>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>Upvotes: 1
Related Questions
- Can we add a <span> inside an <h1> tag?
- How to Insert a Field that Pulls H1 Text?
- How can I write a script which help me to add H1 tag in between Div tag in html?
- how to add a h1 inside a div using javascript
- Is there a way I can place text after an <h1> on the same line?
- How to add text after an h1 but keep the h1 centered
- How to make a line before and after my h1 tag?
- How to add a <span> inside <h1> in Wordpress
- How can I append a <span> tag to a <h1> heading in Wordpress
- How to add some text to a hr tag?