단락의 아이콘 문자 사용

Question

메모 나 경고 메시지 같은 단락의 유형에 대한 아이콘을 설정해야합니다. 내가 글꼴 얼굴 규칙 @ 사용 : 의사 요소는 다음과 같이 아이콘으로 문자를 사용하기 전에 :

p.warning:before {content: '⚠';} 

문제는 다음과 같습니다 단락에서이 아이콘을/스타일의 올바른 방법을 제시하는 방법. 왼쪽/시작 여백의 맨 위를 의미합니까? 나는이 규칙을 사용하는 솔루션으로 :

p.warning {display: table;} 
p.warning:before {display: table-cell;} 

그것은 웹킷과 게코,하지만 오페라에서 잘 작동합니다.

http://richstyle.org/demo-web.php

어떤 제안하십시오 여기에 출력입니까? 대신 실제 문자 자체를 사용

Answer 1

, 당신은이처럼 content 속성은 유니 코드 문자 코드의 둘 필요가 : 당신이 준 기호에 대한 코드는 here를 발견

p.warning:before { 
    content: "\26A0"; 
} 

. 일부 글꼴은 확장 된 유니 코드 문자를 지원하지 않을 수 있습니다. 예를 들어 Windows 7에서 Chrome을 사용하여 quick test on JSFiddle을 수행하면 빈 사각형 (문자가 지원되지 않음)이 생성됩니다. 대신 background-image: url(...) 또는 다른 문자가 포함 된 이미지를 사용하는 것이 좋습니다.