CSS의 버튼에 아이콘을 추가하는 방법

CSS를 사용하여 버튼에 아이콘을 추가하는 방법: 1. 페이지의 글꼴 아이콘 파일을 참조한 다음 글꼴 아이콘을 버튼에 직접 추가합니다. 2. 버튼 프레임을 사용한 다음 "오버플로를 통해 플로트를 지웁니다. :숨김" 속성.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css 비디오 튜토리얼"

CSS를 사용하여 아이콘이 있는 버튼 만들기

먼저 렌더링을 살펴보겠습니다

이것은 작은 검색 아이콘이 있는 검색 버튼입니다. 작성된 CSS는 IE6 및 IE7과 잘 호환되지 않습니다. 네 면의 둥근 모서리는 CSS3 속성을 사용합니다.

1. 작은 아이콘은 폰트로 만들어졌습니다

위 검색 아이콘은 아이코문 사이트를 통해 온라인으로 생성한 것입니다. 본 사이트는 해외 사이트로 국내 접속은 프록시나 우회 도구를 이용하시는 것이 더 빠릅니다. 웹사이트는 아래와 같습니다:

일련의 선택을 한 후 다운로드를 클릭하면 글꼴 파일이 자동으로 생성되며 CSS 데모

는 자신의 파일에 인용하기에 매우 편리합니다.

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-fl11l');
    src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
        url('fonts/icomoon.woff?-fl11l') format('woff'),
        url('fonts/icomoon.ttf?-fl11l') format('truetype'),
        url('fonts/icomoon.svg?-fl11l#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ficomoon{font-family:'icomoon';-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.icon-search:before {content: "\e601"}

2. 버튼 프레임

단순성과 편의성을 위해 a 태그를 버튼의 가장 바깥쪽 레이어로 사용했습니다

<a href="#" class="btn_green">
        <font class="icon_pre ficomoon icon-search"></font>
        <font class="icon_next">筛选</font>
</a>
.btn_green{
    text-decoration:none;
    display:inline-block;
    color:#fff;
    overflow:hidden;
    vertical-align:middle;
    font-size: 1em;
    line-height: 1.4;
}

1. a 태그의 줄 높이가 추가되지 않은 경우 높이를 지원하는 데 사용됩니다. , 다음과 같은 상황이 발생합니다.

줄 높이 원칙 소개와 관련하여 인터넷에서 검색할 수 있는 많은 자료가 있으며, 필요한 경우 자세히 알아볼 수 있습니다.

2.overflow:hidden은 수레를 지우는 데 사용됩니다.

3. 버튼 내용

렌더링에서 볼 수 있듯이 버튼은 왼쪽과 오른쪽 두 부분으로 나뉩니다.

왼쪽 부분은 다음과 같습니다.

<font class="icon_pre ficomoon icon-search"></font>
.icon_pre{
    padding:8px 15px;
    border-right:1px solid #c9e7de;
    background:#69bda4;
    border-radius:4px 0 0 4px;
    float:left
}

border-right는 구분선을 표시하고 나머지 코드는 글꼴 아이콘을 표시합니다.

오른쪽 부분은 다음과 같습니다.

<font class="icon_next">筛选</font>
.icon_next{
    padding:8px 30px;
    background:#69bda4;
    border-radius:0 4px 4px 0;
    float:left
}

두 부분 모두 float를 사용합니다. 이 속성은 사용하기 싫지만, 사용하지 않으면 중간에 큰 공백이 생깁니다. 그리고 글꼴은 인라인 요소이므로 padding-top과 padding-bottom은 유효하지 않습니다.

float를 사용한 후 글꼴을 블록 수준 요소로 변경하여 패딩 효과를 높이고 두 요소를 간격 없이 서로 밀접하게 만들 수 있습니다.

플로팅 원리에 대한 설명은 인터넷에 많이 있으니 이해가 필요합니다.

위 내용은 CSS의 버튼에 아이콘을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!