2016-08-25 5 views
0

기존 자바 스크립트가있는 템플릿을 사용하고 있습니다. 모바일 메뉴 "아이콘"은 실제로 메뉴에 단어 "메뉴"가있는 드롭 다운입니다. 이것은 제 의견으로는 구식이며 모바일 메뉴의 표준 3 줄로 바꾸고 싶습니다.기존 자바 스크립트에 이미지 파일 추가

이 나타납니다 자바 스크립트의 섹션은 다음과 같습니다

if ($nav.is('ul,ol')) { 

    if (settings.header) { 
     $select.append(
     $('<option/>').text('MENU') 
    ); 
    } 

는 것이 가능는 .text을 바꾸려면이 효과 ("IMG/mobilemenubars.png") 또는 뭔가를하려면 .src 추가하는 것입니다 (' MENU ') 섹션? 전체 자바 스크립트를 제공 할 수 있지만 필요한 것은 확실하지 않습니다. 아니면 그렇지?

+1

옵션 요소 그렇게 대답이 더있는 선택의 이미지를 지원하지 않습니다에 대한 Font Awesome cheat sheet입니다. 일부 브라우저에서는 배경 이미지를 설정할 수 있지만 ** 매우 제한적이라고 생각합니다. – epascarello

+1

이미지/아이콘/기타 등을 넣는 것이 가장 좋습니다.

+0

옵션 메뉴에서 이미지가 정말로 필요한 경우 일부 JS 플러그인을 사용해보아야합니다. – kxxoling

답변

1

유니 코드 문자와 Font Awesome font-family를 사용하여 할 수 있습니다. 여기 Here is a DEMO

유니 코드 아이콘

select { 
 
    font-family: FontAwesome; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <select> 
 
    <option>&#xf0c9; Menu</option> 
 
    <option>&#xf040; Pencil</option> 
 
    <option>&#xf072; Vacation</option> 
 
    </select> 
 
</body> 
 

 
</html>

관련 문제