Search code examples
htmlcsstwitter-bootstrapbootstrap-4carousel

Increase the navigation arrow size in bootstrap 4


I'm trying to create a a carousel with two left right navigation arrows in bootstrap 4.

Here is my code for controllers

<!-- Carousel controls -->
                        <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
                            <i class="fa fa-angle-left text-dark"></i>
                        </a>
                        <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
                            <i class="fa fa-angle-right text-dark"></i>
                        </a>

So as you can see I have Used font awsome to insert the arrows. Now my issue is the default arrows are too small

How can I increase the size of two arrows?


Solution

  • If you want to increase the size of the arrows you can simply increase the font size, as you are using font awsome.

    If you want to increase the font size of all the font awsome icons,

    .fa{
     font-size: 100px;
    }
    

    But the above will increase the size of each an every Fa icons,

    So instead of that to increase the sizes of only the arrows,

    .fa-angle-left{
            font-size: 100px;
        }
        .fa-angle-right{
            font-size: 100px;
        }
    

    So this will increase only the size of arrows.