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
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!
One way of changing the icon size is to set it with css, like: