Icons like the ones in boostrap

Asked

Viewed 59 times

0

I would like to know how I can take an icon of mine, put it on the page, but if you want to change the color or size of the icon, I can do this...

For example, in the Hover of a link, it changes color.

att,

css twitter-bootstrap icons

  • It’s called Font Awesome

  • You can do it by hand only with CSS in a simple way even, but it will not work the color change in IE and Edge... If you want I make a template.

1 answer

1

If it’s about the icons of Bootstrap, you can put on the page any icon of Glyphicons, available on the website, this being only one <span> with the classes that makes the visual change.

For any change in color or size, you can use the :hover directly in css, in any class, id or tag. Whenever the mouse goes over the element, this block will activate.

To change the icon color, just use the property color within the :hover.

To change the size, there is more than one way to do it. I am providing an example with transform: scale(n). Check below if this is what you are looking for (hover your mouse over the icon):

.glyphicon:hover {
  color: blue;
  transform: scale(2);
  margin-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Error:</span>
    Enter a valid email address
</div>

  • Yes, from Bootstrap I know... I want to do the same, but with my icons... how can I do it?

  • Sorry I didn’t get it, what do you mean your icons? Did you do some in SVG or something? Anyway, can try with the css I passed above, applying to your case?

  • For this you need a custom font file, where each letter is a monochrome icon.

  • I made the icons in SVG... and I want to use them the same way I use the Bootstrap icons... Same technique

  • I believe this answer will help you https://answall.com/questions/46582/mudar-cor-do-svg-no-hover

Browser other questions tagged css twitter-bootstrap icons

You are not signed in. Login or sign up in order to post.