Twitter Bootstrap Question posted in

awesome font 5 border color-Twitter bootstrap

how can I add a border to the Twitter icon and change the color to red?

<div style="font-size:3em; color:green; border-color:red">

border-color doesn’t help.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<nav class="navbar navbar-dark bg-dark">

  <div style="font-size:3em; color:green">
    <i class="fab fa-twitter" data-fa-transform="shrink-3.5" data-fa-mask="fas fa-circle"></i>
  </div>

</nav>


<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
Tags:

2

Answers


  1. 0

    The <i> tag is being replaced with an SVG so you need to apply the styles to the SVG.

    Here is what I did:

    svg {
  border-radius: 50%;
  border: 1px solid red;
}

    Unfortunately the SVG appears to have a transparent border around it in the image. This means that your icon will have a space, between the border and the image, that is the same color as the SVG background.

    I am not sure how much you can do about this as your SVG appears to be generated by a third party script. You could make the SVG background the same color as the border which will remove any space between the icon and its border.

    Here is an example of the border issue (on the left) and my very limited fix (on the right): https://codepen.io/anon/pen/XZEZvL

    You could also use another div to make the border like I have done here: https://codepen.io/anon/pen/xYWWrO however I absolutely do not recommend this as I imagine it could be a pain to manage responsively. It is also not great practice and it isn’t really a solution to the problem.

    If this is a major issue for you then I suggest getting the icon as an image and editing it.

    Extra reading that may help you with this situation that I found:

    You could also try switching to the CSS web font version of font-awesome to see if that shares the issue. Here are some helpful links if you want to give this a go:

    Best solution I have found:

    I applied a normal border with border radius to the SVG however I removed the fa-data-mask attribute. This removed any space between the border. See an example here: https://codepen.io/anon/pen/NyYMxK

    Login or Signup to reply.
  2. 0

    I used this code for Facebook icon. it has border and shadow. you can use it for Twitter icon. change “border-radius: 50%” to set border square, and “border: … rgb()” for color

    HTML:

    <a class="align-items-center justify-content-center  d-flex roundbutton text-decoration-none socialSignInBtns" href="#">
<i class="fab fa-facebook-f fa-fw" aria-hidden="true" style="color: #4267b2"></i>
</a>

    CSS:

    .socialSignInBtns {
    display: block;
    height: 5vw;
    width: 5vw;
    border-radius: 50%;
    box-shadow: 0px 1px 10px 0px rgb(181, 165, 196);
    border: 5px solid rgb(196, 189, 189);
}


.socialSignInBtns:hover {
    opacity: 0.7;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search