如何在bootstrap实现的网页中使用社交glyphicons?

 新人缓冲 发布于 2023-01-04 15:26

我无法在bootstrap实现的网页中使用社交媒体字形图标.我能够使用像搜索,地球等常见的那些.

这是我使用通常的方式:


如何为社交字形实现上述方法?

2 个回答
  • Bootstrap 3免费提供的glyphicons是完整付费Glyphicons库的子集,不包括社交媒体图标集.

    相反,您可以使用Font Awesome,一个完全支持的免费替代品(以及Bootstrap 4中的首选图标工具包),它具有免费的品牌图标集:

    在此输入图像描述

    Font Awesome Version 4 - Brands - jsFiddle&Stack Snippets中的演示:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-digg"></i>
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-facebook"></i>
    <i class="fa fa-flickr"></i>
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-github"></i>
    <i class="fa fa-google"></i>
    <i class="fa fa-google-plus"></i>
    <i class="fa fa-instagram"></i>
    <i class="fa fa-jsfiddle"></i>
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-reddit"></i>
    <i class="fa fa-skype"></i>
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-spotify"></i>
    <i class="fa fa-stack-exchange"></i>
    <i class="fa fa-stack-overflow"></i>
    <i class="fa fa-steam"></i>
    <i class="fa fa-stumbleupon"></i>
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-twitter"></i>
    <i class="fa fa-vimeo-square"></i>
    <i class="fa fa-vine"></i>
    <i class="fa fa-windows"></i>
    <i class="fa fa-wordpress"></i>
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-youtube"></i>
    
    
    
    <style type="text/css">
      .fa {
        padding: 4px;
        width: 200px;
      }
    
      .fa::before {
        display: inline-block;
        /* .fa-fw */
        width: 1.28571429em;
        text-align: center;
      }
    
      .fa::after {
        content: attr(class);
        font-family: consolas, monospace;
        font-size: 15px;
        /* .code */
        padding: 2px 4px;
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 4px;
        margin-left: 5px;
      }
    </style>
    2023-01-04 15:29 回答
  • 将其粘贴到代码的头部

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    

    并且只是插入facebook图标的示例

    <i class="fa fa-facebook"></i>
    

    有关字形图标的完整列表,请访问https://fortawesome.github.io/Font-Awesome/icons/

    2023-01-04 15:29 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有