Bootstrap 社交媒体图标无法像 bootstrap 网站上显示的那样工作
Bootstrap social media Icons not working as shown on the bootstrap site
我想在我的网站上添加社交媒体图标。我希望它们看起来像带圆角的正方形。我已经通过 cdn 获得了 bootstrap,按照说明我在我的 <head>
中添加了很棒的字体,所以我的脑袋现在看起来像这样
<head>
<title>{% block title %}{{post.title}}{% endblock title %}</title>
<link href="{% static 'blog/css/blog.css' %}" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<style>
{% block style %}
{% endblock style %}
</style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"
integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<!--<script type="text/javascript" src="http://content.jwplatform.com/libraries/WQWJdvRx.js"></script>-->
{% block head_extra %}{% endblock head_extra %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
这就是我所拥有的,它是从站点复制和粘贴的,除了容器 div,我在发布到这里之前在教程中看到它,并认为通过添加它,它会一个区别。没有。
<div class="container">
<a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
<span class="fa fa-twitter"></span>
</a>
<li><a href="#"><i class="fa fa-lg fa-youtube-square"></i></a></li>
</div>
如何使它在语法上正确以使其工作?欢迎所有指导和建议
<div class="container">
<ul>
<li><a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank"><i class="fa fa-twitter"></i>
</a></li>
<li><a href="#"><i class="fa fa-youtube-square"></i></a></li>
</ul>
</div>
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon.
正确的格式应该是:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
<a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-youtube" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-youtube-square fa-stack-1x"></i>
</span>
</a>
</div>
顺便说一句:您的 HTML 无效。 li
必须是 ul
.
的子代
我想在我的网站上添加社交媒体图标。我希望它们看起来像带圆角的正方形。我已经通过 cdn 获得了 bootstrap,按照说明我在我的 <head>
中添加了很棒的字体,所以我的脑袋现在看起来像这样
<head>
<title>{% block title %}{{post.title}}{% endblock title %}</title>
<link href="{% static 'blog/css/blog.css' %}" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<style>
{% block style %}
{% endblock style %}
</style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"
integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<!--<script type="text/javascript" src="http://content.jwplatform.com/libraries/WQWJdvRx.js"></script>-->
{% block head_extra %}{% endblock head_extra %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
这就是我所拥有的,它是从站点复制和粘贴的,除了容器 div,我在发布到这里之前在教程中看到它,并认为通过添加它,它会一个区别。没有。
<div class="container">
<a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
<span class="fa fa-twitter"></span>
</a>
<li><a href="#"><i class="fa fa-lg fa-youtube-square"></i></a></li>
</div>
如何使它在语法上正确以使其工作?欢迎所有指导和建议
<div class="container">
<ul>
<li><a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank"><i class="fa fa-twitter"></i>
</a></li>
<li><a href="#"><i class="fa fa-youtube-square"></i></a></li>
</ul>
</div>
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon.
正确的格式应该是:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
<a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-youtube" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-youtube-square fa-stack-1x"></i>
</span>
</a>
</div>
顺便说一句:您的 HTML 无效。 li
必须是 ul
.