Icon on image using CSS and Material Design Icons

Question

Icon on image using CSS and Material Design Icons

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I have the following code:

.stat {
  color: #4c4c4c !important;
  float: left !important;
  font-size: 10px !important;
  line-height: 17px !important;
  text-align: center !important;
  text-decoration: none !important;
  width: auto !important;
}

.stat:hover {
  color: #747474 !important
}

.stat strong {
  display: block !important;
  font-size: 22px !important;
  line-height: 25px !important
}

<div>
  <a href="#" class="stat">
    <strong>3333</strong> vic
  </a>
  <a href="#" class="stat">
    <strong>60</strong> 0986001661
  </a>
  <a href="#" class="stat">
    <strong>117</strong> [email protected]
  </a>
</div>

I would like to know how I can align an icon instead of the strong tag. Something like this:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> vicsss
  </a>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> 98988888
  </a>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> [email protected]
  </a>
</div>

css3 css material-design

asked by Dimoreno 15.07.2017 в 00:36

source

2 answers

1

   <div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
   <img src="/path/to/image.jpg " alt=.. width=.. height=..style="position: relative; z-index: 1;" />
   <i src="/path/to/play.jpg " alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
  </div>

the wrapper must have relative position and the children or absolute icons

answered by 15.07.2017 в 00:45

Send value of a variable from one method to another javascript How can I export a function from one component to another? ANGULAR 2/4

score 1 · Accepted Answer

It's simple, you just have to make the label i have display:block and that the text of the link a is centered. Something quite similar to what you already had (I only added something else to make it more colorful):

a {
  text-align: center;
  display: inline-block;
  text-decoration: none;
  color: #222;
}

a:hover {
  color: #666;
}

i.material-icons {
  display: block;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> vicsss
  </a>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> 98988888
  </a>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> [email protected]
  </a>
</div>