菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何做 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap Glyphicons


Glyphicons

Bootstrap 提供了来自 Glyphicons Halflings 集合的 260 个 glyphicons。

Glyphicons 可用于文本、按钮、工具栏、导航、表单等。

以下是一些 glyphicons 的示例

信封 glyphicon:

打印 glyphicon:

搜索 glyphicon:

下载 glyphicon:


Glyphicon 语法

Glyphicon 的插入语法如下

<span class="glyphicon glyphicon-name"></span>

上面的语法中的 name 部分必须替换为正确的 glyphicon 名称。


Glyphicon 示例

以下示例展示了使用 glyphicons 的不同方法

示例

<p>信封图标: <span class="glyphicon glyphicon-envelope"></span></p>
<p>链接中的信封图标
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>
<p>按钮上的搜索图标
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> 搜索
  </button>
</p>
<p>带有样式的按钮上的搜索图标
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> 搜索
  </button>
</p>
<p>打印图标: <span class="glyphicon glyphicon-print"></span></p>
<p>带有样式的链接按钮上的打印图标
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> 打印
  </a>
</p>
自己动手试一试 »

通过练习来测试自己

练习

使用 Glyphicon 类值使 span 显示为“搜索”图标。

<span class=""></span>

开始练习


完整的 Bootstrap Glyphicon 参考

如需完整的 glyphicons 参考,请访问我们的完整 Bootstrap Glyphicon 参考


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持