CODEWITHSUNDEEP
twitter-bootstrap
user1836957
user1836957

Reputation: 547

Bootstrap: how to control size and color of a graphic icon

I am very new in using bootstrap. So my apologies in advance if the question is very basic. I am using bootstrap in my Angular application and would like to add a back button icon to the page, But what I am trying to do is to make the color of the icon gray instead of its original color and make its size bigger. 

<a href="./material_view">
    <span class="glyphicon glyphicon-circle-arrow-left" ></span>
</a>

For the list of graphics in https://getbootstrap.com/docs/3.3/components/#nav, I have picked the graphic of class "glyphicon glyphicon-circle-arrow-left". I tried adding height and width to the span element but it didn't work. I was wondering if any one has any tips or suggestions? Thank you

Upvotes: 1

Views: 4401

Answers (1)

G. Nachtigal
G. Nachtigal

Reputation: 41

Maybe, if you don't mind, you can change to the Font Awesome Icons (personally I had a lot of problems with glyphicons in the past).

The actual code would be:

HTML:

<a href="./material_view">
    <i class="fa fa-arrow-circle-left icon" aria-hidden="true"></i>
</a>

And you can modify its CSS by simply calling its class:

CSS:

.icon{
    color: gray;
    font-size: 50px; //or whathever you want
}

Upvotes: 1

Related Questions