如何在html的H1标记中添加小文本？

我试图在H1标记中添加小文本，同时在文本前添加图标，但不幸的是，它不起作用，我在header类中的同一H1标记中有两个问题，注意到我正在使用引导框架构建我的站点：

小标签在h1标签内不起作用

未在同一h1中使用引导添加图示符图标 标签

下面是我正在使用的代码：

正文{
背景#f4；
}
.导航栏导航{
最小高度：33px！重要；
页边距底部：0；
边界半径：0；
}
navbar先生{
背景色：#e74c3c；
}
.navbar.navbar品牌{
颜色：#ecf0f1；
}
.navbar.navbar品牌：hover，
.navbar.navbar品牌：聚焦{
颜色：#ffbbbc；
}
.navbar.navbar文本{
颜色：#ecf0f1；
}
.navbar.navbar文本a{
颜色：#ffbbbc；
}
.navbar.navbar文本a:悬停，
.navbar.navbar文本a：焦点{
颜色：#ffbbbc；
}
.navbar.navbar导航链接{
颜色：#ecf0f1；
边界半径：.25rem；
边缘：0.25微米；
}
.navbar.navbar导航链接：未（.disabled）：悬停，
.navbar.navbar导航链接：未（.disabled）：焦点{
颜色：#ffbbbc；
}
.navbar.navbar导航下拉菜单{
背景色：#e74c3c；
边框颜色：#c0392b；
}
.navbar.navbar导航下拉菜单.下拉项{
颜色：#ecf0f1；
}
.navbar.navbar导航下拉菜单。下拉项：悬停，
.navbar.navbar导航下拉菜单下拉项：焦点，
.navbar.navbar导航下拉菜单.dropdown-item.active{
颜色：#ffbbbc；
背景色：#c0392b；
}
.导航栏.导航栏导航.下拉菜单.下拉分隔符{
边框顶部颜色：#c0392b；
}
.navbar.navbar nav.nav-item.active.nav链接，
.navbar.navbar导航。导航项。激活。导航链接：悬停，
.navbar.navbar nav.nav-item.active.nav链接：焦点，
.navbar.navbar nav.nav-item.show.nav链接，
.navbar.navbar nav.nav-item.show.nav链接：悬停，
.navbar.navbar nav.nav-item.show.nav链接：焦点{
颜色：#ffbbbc；
背景色：#c0392b；
}
.navbar.navbar切换器{
边框颜色：#c0392b；
}
.navbar.navbar切换器：悬停，
.navbar.navbar切换器：焦点{
背景色：#c0392b；
}
.navbar.navbar切换器.navbar切换器图标{
颜色：#ecf0f1；
}
.导航栏，导航栏倒塌，
.navbar.navbar表单{
边框颜色：#ecf0f1；
}
.navbar.navbar链接{
颜色：#ecf0f1；
}
.navbar.navbar链接：悬停{
颜色：#ffbbbc；
}
.主色背景{
背景色：#e74c3c；
边框颜色：#c0392b；
颜色：#ffffff；
}
@介质（最大宽度：575px）{
.navbar展开sm.navbar导航显示下拉菜单下拉项{
颜色：#ecf0f1；
}
.navbar展开sm.navbar导航显示.下拉菜单.下拉项：悬停，
.navbar展开sm.navbar导航显示下拉菜单下拉项：焦点{
颜色：#ffbbbc；
}
.navbar展开sm.navbar导航显示下拉菜单.dropdown-item.active{
颜色：#ffbbbc；
背景色：#c0392b；
}
}
@介质（最大宽度：767px）{
.navbar展开md.navbar导航显示下拉菜单.下拉项{
颜色：#ecf0f1；
}
.navbar展开md.navbar导航显示下拉菜单下拉项：悬停，
.navbar展开md.navbar导航显示下拉菜单下拉项：焦点{
颜色：#ffbbbc；
}
.navbar展开md.navbar导航显示下拉菜单.dropdown-item.active{
颜色：#ffbbbc；
背景色：#c0392b；
}
}
@介质（最大宽度：991px）{
.navbar展开lg.navbar导航显示.下拉菜单.下拉项{
颜色：#ecf0f1；
}
.navbar展开lg.navbar导航显示.下拉菜单.下拉项：悬停，
.navbar展开lg.navbar导航显示.下拉菜单.下拉项：焦点{
颜色：#ffbbbc；
}
.navbar展开lg.navbar导航显示.下拉菜单.下拉项.激活{
颜色：#ffbbbc；
背景色：#c0392b；
}
}
@介质（最大宽度：1199px）{
.navbar展开xl.navbar导航显示下拉菜单下拉项{
颜色：#ecf0f1；
}
.navbar展开xl.navbar导航显示下拉菜单下拉项：悬停，
.navbar展开xl.navbar导航显示.下拉菜单.下拉项：焦点{
颜色：#ffbbbc；
}
.navbar展开xl.navbar导航显示下拉菜单.dropdown-item.active{
颜色：#ffbbbc；
背景色：#c0392b；
}
}
.navbar展开.navbar导航显示.下拉菜单.下拉项{
颜色：#ecf0f1；
}
.navbar展开.navbar导航显示.下拉菜单.下拉项：悬停，
.navbar展开.navbar导航显示.下拉菜单.下拉项：焦点{
颜色：#ffbbbc；
}
.navbar展开.navbar导航.show.下拉菜单.dropdown-item.active{
颜色：#ffbbbc；
背景色：#c0392b；
}

ِ管理区仪表板
.bd占位符img{
字体大小：1.125rem；
文本锚定：中间；
-webkit用户选择：无；
-moz用户选择：无；
用户选择：无；
}
@介质（最小宽度：768px）{
.bd占位符img lg{
字体大小：3.5rem；
}
}
















仪表板管理您的站点

我检查了你的代码。您使用的引导版本似乎有问题。我删除了你的两个引导链接并添加了一个。我还添加了Mansi的评论，使图标可以调整大小。您可以从下面的代码段中进行检查

正文{
背景#f4；
}
h1 span.glyphion-cog{
字体大小：0.5em；