Put an image as an element icon

Question

Put an image as an element icon

Navigation

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

1

How can I get an image to be set as a background in an element of my navbar ?

I've tried it this way.

<nav class="navbar navbar-default navbar-inverse "  >
<div id="navigation">
  <ul class="nav nav-pills">
     <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
          <h4 >MENU <b class="caret"></b></h4>
        </a>

        <ul class="dropdown-menu" >
          <li class="dropdown-header" ><a href="#" ><h4>PRODUCTOS</h4></a></li>
          <li class="divider"></li>
          <li><a href="pacas.html"><h4>Pacas Credenciales</h4></a></li>
        </ul>
      </li>

     <li role="presentation" ><a href="locacion.html"><h4> LOCATION</h4></a></li>
     <li role="presentation" ><a href="dama.html"><h4> CONTACTANOS</h4></a></li>
     <li role="presentation" ><a href="index.html" class="a"><h4 class="h"><img class="imagen" src="assets/images/home.png"></h4></a></li>

  </ul>

And this is my code CSS :

.imagen{
    margin: 0;
    display:inline-block;
    height: 18px;
    float:none;
}

But the image does not cover the entire element as it is displayed like this.

I wish that all this picture is the image of the Home icon and not that the image looks so small, I tried to play with the size of the image but I can not adapt it because if I increase the image size is distorted and becomes bigger than the other elements, any suggestions? I'm using

html css bootstrap

asked by Alejandro Ruiz 25.04.2016 в 06:38

source

2 answers

How to generate a parse, to read an xml and show it in a listview with soap How to consume a web service in jQuery

score 1 · Answer 1

In the example

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-inverse "  >
<div id="navigation">
  <ul class="nav nav-pills">
     <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
          <h4 >MENU <b class="caret"></b></h4>
        </a>

        <ul class="dropdown-menu" >
          <li class="dropdown-header" ><a href="#" ><h4>PRODUCTOS</h4></a></li>
          <li class="divider"></li>
          <li><a href="pacas.html"><h4>Pacas Credenciales</h4></a></li>
        </ul>
      </li>

     <li role="presentation" ><a href="locacion.html"><h4> LOCATION</h4></a></li>
     <li role="presentation" ><a href="dama.html"><h4> CONTACTANOS</h4></a></li>
     <li role="presentation" ><a href="index.html" class="a"><h4 class="h"><img class="imagen" width="30" heigth="30" src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__home.png"></h4></a></li>



  </ul>

I can perfectly adapt by the definition of width and heigth the dimensions of the image

score 0 · Answer 2

A possible solution to change the size of the image does not change the size of the menu bar (that's the real problem, right?) would be to use a background image instead of putting the image next to the text.

This way you can change the size of the background image using background-size (where you could add numeric values or things like contain or cover so that it occupies all the size of the button), and like the value of background-position is" center center ", the icon will always be centered on the button.

Here is an example of how it could be done:

.a {
  background-image:url(http://lorempixel.com/18/18);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:40px 40px;
  text-indent:-1000px;
  min-width:50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default navbar-inverse "  >
  <div id="navigation">
    <ul class="nav nav-pills">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
          <h4 >MENU <b class="caret"></b></h4>
        </a>
        <ul class="dropdown-menu" >
          <li class="dropdown-header" ><a href="#" ><h4>PRODUCTOS</h4></a></li>
          <li class="divider"></li>
          <li><a href="pacas.html"><h4>Pacas Credenciales</h4></a></li>
        </ul>
      </li>
      <li role="presentation" ><a href="locacion.html"><h4> LOCATION</h4></a></li>
      <li role="presentation" ><a href="dama.html"><h4> CONTACTANOS</h4></a></li>
      <li role="presentation" ><a href="index.html" class="a"><h4 class="h">HOME</h4></a></li>
    </ul>
  </div>
</nav>

Note how the background image goes in the a and not in the h4 to avoid problems with the margins and also that it would be advisable to indicate a minimum width to make sure that the complete image enters the button. I also added some "hidden" text to make it more accessible.