HTML / CSS 입력 유형 =“버튼”에 이미지 아이콘을 추가하는 방법은 무엇입니까? 버튼 중앙에 이미지를 넣습니다. 를 사용하여

아래 CSS를 사용하고 있지만 버튼 중앙에 이미지를 넣습니다. 를 사용하여 아이콘을 왼쪽 또는 오른쪽으로 정렬 <input type="button">하면 텍스트와 이미지가 잘 맞고 정렬됩니다.

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;

답변

반드시를 사용해야하는 경우 다음을 input시도하십시오.

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

일반적으로 내부 button와 함께 사용하는 것이 조금 더 쉽습니다 img.

<button type="submit"><img> Text</button>

그러나 button제출 을 위한 의 브라우저 구현 은 일관성이 없으며 모든 버튼 값 button이 사용될 때 전송된다는 사실도 있습니다. 이는 다중 제출 양식에서 “무엇 버튼을 클릭했는지”감지를 죽입니다.

답변

버튼 이미지가 16×16 픽셀이라고 가정하면 원하는 작업을 수행 할 수 있습니다.

<input type="button" value="Add a new row" class="button-add" />
input.button-add {
    background-image: url(/images/buttons/add.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

버튼 예 :

예제 버튼

최신 정보

Less를 사용한다면이 믹스 인이 유용 할 것입니다.

.icon-button(@icon-url, @icon-size: 16px, @icon-inset: 10px, @border-color: #000, @background-color: transparent) {
    height: @icon-size * 2;
    padding-left: @icon-size + @icon-inset * 2;
    padding-right: @icon-inset;
    border: 1px solid @border-color;
    background: @background-color url(@icon-url) no-repeat @icon-inset center;
    cursor: pointer;
}

input.button-add {
    .icon-button("http://placehold.it/16x16", @background-color: #ff9900);
}

위의 내용은 다음과 같이 컴파일됩니다.

input.button-add {
  height: 32px;
  padding-left: 36px;
  padding-right: 10px;
  border: 1px solid #000000;
  background: #ff9900 url("http://placehold.it/16x16") no-repeat 10px center;
  cursor: pointer;
}

JSFiddle

답변

<button type="submit" style="background-color:transparent; border-color:transparent;">
  <img src="images/button/masuk.png" height="35"/>
</button>
<button type="reset" style="background-color:transparent; border-color:transparent;">
  <img src="images/button/reset.png" height="35"/>
</button>

도움이 되었기를 바랍니다.

답변

스프라이트 시트를 사용하는 경우 불가능 해지며 요소를 래핑해야합니다.

.btn{
    display: inline-block;
    background: blue;
    position: relative;
    border-radius: 5px;
}
.input, .btn:after{
    color: #fff;
}
.btn:after{
    position: absolute;
    content: '@';
    right: 0;
    width: 1.3em;
    height: 1em;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}

이 바이올린을 확인하십시오 : http://jsfiddle.net/AJNnZ/

답변

이 트릭을 시도해 볼 수 있습니다!

1st) 이렇게 :

<label for="img">
   <input type="submit" name="submit" id="img" value="img-btn">
   <img src="yourimage.jpg" id="img">
</label>

2nd) 스타일링!

<style type="text/css">
   img:hover {
       cursor: pointer;
   }
   input[type=submit] {
       display: none;
   }
</style>

깨끗하지는 않지만 일을 할 것입니다!

답변

여기 버튼 요소에 아이콘을 추가하기 만하면됩니다.

   <button class="social-signup facebook">
     <i class="fa fa-facebook-official"></i>
      Sign up with Facebook</button>

답변

버튼 http://jsfiddle.net/s5GVh/1415/ 안에 이미지 삽입을 시도 할 수 있습니다.

<button type="submit"><img src='https://aca5.accela.com/bcc/app_themesDefault/assets/gsearch_disabled.png'/></button>