How can I remove vertical padding from ionic icon?


Tags: html,css,web,ionic-framework,styling

Problem :

Here is my HTML :

<i class="icon ion-email notify-icon"></i>

and CSS:

.notify-icon {
  color: white;
  font-size: 35px;
  background-color: gray;
  padding: 0;
}

I set padding to 0 and it removes horizontal padding, but I still see 4-5px of gray padding on top and bottom. How can I solve it?

Solution: As I understood it is impossible to remove vertical padding, so I decided to replace ionic icon with image.



Solution :

Don't know why you want to use background color but if you wanted gray email icon with size 35px do this. Full implementation here http://codepen.io/anon/pen/oLABwK

.notify-icon {
  color: gray;
  font-size: 35px;
}

Or if you wanted bordered icon use

 <i class="icon ion-ios-email-outline notify-icon2 ">

And CSS

 .notify-icon2 {
  font-size: 35px;
  }

    CSS Howto..

    How to put a div in center of browser using CSS?

    How to create a texture paper background using CSS without image

    How can i return a navmenu button to previous style after clicking another button

    How do I get two side by side divs displayed correctly inside a bordered, dynamic height content area?

    How to override CSS in joomla template

    How to set width of DIV to span with text inside it (so not fixed)

    How to create CSS gradient from the centre? [closed]

    How do align texts in the child div

    How to make div blocks not floating using CSS?

    How to organize user's shares to easily add comments to that particular post?

    CSS background color show another color

    css: how to make circles connected by lines responsive with bootstrap?

    How to get dimensions for a background image when background-size is set to contain?

    How can I add flashing effect to an option tag?

    How to modify CSS or JS file from “materialize:materialize” package in Meteor

    How to dynamically change the value of a CSS property inside a stylesheet?

    How to get relative CSS from photoshop artboard?

    PrimeFaces: how can I make use of customized icons?

    How can I apply CSS to elements created with javascript in IE?

    How do I suppress errors in IntelliJ Idea 12

    How to make background image position stay same on all resolutions?

    How to horizontally center a link element with CSS?

    How to get border radius and gradient background working together in IE 9

    how to get fixed header with css?

    How to make a photo collage using html and css? [closed]

    How to start a css animation from current position

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to check image is visible (Webdriver)

    How can I set first element to display: none;?

    How to set line spacing of an ordered list consistently across browsers?