skip to Main Content

How can I make a font awesome icon bigger in a website? I used a template from Creative Tim to make a land page (Template used = Paper kit).
But in the nav-bar I have three icons of youtube, instagram and facebook that I cannot change the size. Does somebody know how to do this?

when the device is too small, the elements show in a lateral bar, but they are too small for a movil device and i need to make them bigger as well.
Hope somebody can help me!
Is the first time I’m working with templates, and i’m a newbie in the web development world.
Please be kind!

Here is the code of the navbar I have trouble with:


    <nav class="navbar navbar-default" role="navigation-demo" id="demo-navbar">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="#" alt="Bootstrap" width="45" height="45"></a><span class="brand-text">Logo brand</span>
        </div>
          

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navigation-example-2">
          <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#" target="_blank" class="btn btn-simple"><i class="fa fa-youtube"></i></a>
            </li>
            <li>
                <a href="#" target="_blank" class="btn btn-simple"><i class="fa fa-instagram"></i></a>
            </li>
            <li>
                <a href="#" target="_blank" class="btn btn-simple"><i class="fa fa-facebook"></i></a>
            </li>
           </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-->
    </nav> 

I tried to make it bigger but it looks the same changing font size, size. I even used !important, uses of clases of fa-2x, tried to modify different components of the navbar, couldn’t make it.

2

Answers


  1. I can’t comment, but wanted to share that latest version is 6.3.0 and you can learn more about FA icon sizing here: https://fontawesome.com/docs/web/style/size. Good luck and hope this helps!

    Login or Signup to reply.
  2. One way of changing the icon size is to set it with css, like:

    #navigation-example-2 .fa {
      font-size: 20px;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search