Twitter Bootstrap Question posted in

Why doesn't my social media icon display correctly-Twitter bootstrap

So I’m trying to add social media icons to the footer of my web application. I was able to do it in a separate HTML file but when I tried it in my Django app I’m not able to make the icons look the way I want it. Seems like my css for the icon isn’t working and showing. I deleted the css for the icon and it was the same. Not sure what I’m doing wrong

body {
    background: #fafafa;
    color: #333333;
    margin-top: 5rem;
    }
  
  h1, h2, h3, h4, h5, h6 {
    color: #444444;
  }
  
  ul {
    margin: 0;
  }
  
  .bg-steel {
    background-color: #5f788a;
  }
  
  .site-header .navbar-nav .nav-link {
    color: #cbd5db;
  }
  
  .site-header .navbar-nav .nav-link:hover {
    color: #ffffff;
  }
  
  .site-header .navbar-nav .nav-link.active {
    font-weight: 500;
  }
  
  .content-section {
    background: #ffffff;
    padding: 10px 20px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin-bottom: 20px;
  }
  
  .article-title {
    color: #444444;
  }
  
  a.article-title:hover {
    color: #428bca;
    text-decoration: none;
  }
  
  .article-content {
    white-space: pre-line;
  }
  
  .article-img {
    height: 65px;
    width: 65px;
    margin-right: 16px;
  }
  
  .article-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e3e3e3
  }
  
  .article-metadata a:hover {
    color: #333;
    text-decoration: none;
  }
  
  .article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }
  
  .account-img {
    height: 125px;
    width: 125px;
    margin-right: 20px;
    margin-bottom: 16px;
  }
  
  .account-heading {
    font-size: 2.5rem;
  }
  .fa {
    padding: 10px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
  /* Twitter */
  .fa-twitter {
    background: #55ACEE;
    color: white;
  } 
  .fa-instagram {
    background: #f09433; 
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  color: white;
  }
  .fa-linkedin {
    background:royalblue;
    color: white;
  } 
{% load static %}
<!DOCTYPE html>
<html>
<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">

    {% if title %}
        <title>Django Blog - {{ title }}</title>
    {% else %}
        <title>Django Blog</title>
    {% endif %}
</head>
<body>
    <header class="site-header">
      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <div class="container">
          <a class="navbar-brand mr-4" href="{% url 'blog-home' %}">WOOF</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarToggle">
            <div class="navbar-nav mr-auto">
              <a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
              <a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
            </div>
           
            <!-- Navbar Right Side -->
            <div class="navbar-nav">
              {% if user.is_authenticated %}
                <a class="nav-item nav-link" href="{% url 'post-create' %}">+ New Post  </a>
                <a class="nav-item nav-link" href="{% url 'profile' %}">Profile</a>
                <a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
              {% else %}
                <a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
                <a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
              {% endif %}
            </div>
          </div>
        </div>
      </nav>
    </header>
    <main role="main" class="container "  id="content">
      <div class="row">
        <div class="col-md-8">
          {% if messages %}
            {% for message in messages %}
              <div class="alert alert-{{ message.tags }}">
                {{ message }}
              </div>
            {% endfor %}
          {% endif %}
          {% block content %}{% endblock %}
        </div>
        
        <div class="col-md-4">
          <div class="content-section bg-dark">
            <h3 class= text-white>Woof</h3>
            <p class='text-light'>Blog responsibly 
              <ul class="list-group">
                <li class="list-group-item list-group-item-light" > <a href="{% url 'blog-home' %}">Latest Posts </a></li>
                <li class="list-group-item list-group-item-light"> <a href="{% url 'announcement_page' %}">Announcements </a></li>
             
              </ul>
            </p>
          </div>
        </div>
      </div>
      <footer>
                <div class="row bg-dark  mt-5">
                    <div class="col-6 text-center text-info mt-3">
           <p> Made by @Bryan & Ismail</p>
            <p>WOOF</p>
          </div>
          <div class="col-6 text-center ">
            <a href="#" class="fa fa-instagram"></a>
            <a href="#" class="fa fa-linkedin"></a>
           </div>
            </footer>
    </main>

  
</body>
</html>
Tags:

2

Answers


  1. 0

    I can’t understand totally what you want but you may use !important tag. So you give priority.

    .fa-instagram {
    background: red !important; 
}
    Login or Signup to reply.
  2. 0

    Since you say that the CSS you wrote does not get applied, first of all you should check if it gets imported at all.

    Try the next steps to debug it:

    1. Try to find why if the file containing the CSS is imported.
    2. If the file is imported, but int the Browser’s Styles tab, the rules applied do not appear, try clearing your cache.
    3. If it is imported, see if all of the rules are ignored, or just some of them. If just one of them, try to use "!important". It is not the best practice, but it will get you the desired result, and if you don’t use it too much it is ok.
    4. If it IS NOT imported, then you should import it.

    I’ve tried it on my local machine, and it works, the CSS rules are applied successfully. So, my guess is that you file is not imported at all, or it is just a cache issue. Try from an incognito tab.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search