I need some assistance with resizing an icon in my HTML page that is inside a container with a transparent button.
This is how the div is declared in my HTML file:
<div class="container button">
<div class="col-xs-10 col-sm-70">
<a href="#kmeans" class="btn btn-primary"><i class="fa fa-question-circle fa-4x" aria-hidden="true" title="How does it work"></i></a>
</div>
</div>
This is the CSS for setting up the container:
section#analyze .container.button {
border: 2px solid black; /*delete'*/
position: relative;
margin-right: 10%;
width: 5%;
display: none;
height: 120%;
}
and this is how I set the button in the css:
section#analyze .container.button .btn-primary {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-size: 100%;
width: 100%;
height: 100%;
left: 20%;
margin-top: 20%;
position: initial;
}
Any suggestions on how to make the icon resize with the page?