아이콘 내에 텍스트를 표시하는 방법

저는 웹 개발에 익숙하지 않습니다. (자기 가르침) 그렇다면 바보 같은 질문인데 변명하십시오.아이콘 내에 텍스트를 표시하는 방법

아이콘 안에 텍스트를 어떻게 표시합니까? 마음 속의 번호 등. 웹 폰트 아이콘이 작동하지 않는다고 가정합니다. CSS 모양을 사용하면 용도에 맞지 않으므로 크기가 조정될 때 렌더링됩니다. 벡터가 더 좋은 옵션입니다.

다음은 내가 사용할 계획이었던 심장 용 CSS입니다. 그러나 내부에 텍스트를 표시하는 방법으로 명확하지 않습니다.

.heart { 
     position: relative; 
     width: 100px; 
     height: 90px; 
    } 
    .heart:before, 
    .heart:after { 
     position: absolute; 
     content: ""; 
     left: 50px; 
     top: 0; 
     width: 50px; 
     height: 80px; 
     background: #fc2e5a; 
     -moz-border-radius: 50px 50px 0 0; 
     border-radius: 50px 50px 0 0; 
     -webkit-transform: rotate(-45deg); 
      -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
      -o-transform: rotate(-45deg); 
       transform: rotate(-45deg); 
     -webkit-transform-origin: 0 100%; 
      -moz-transform-origin: 0 100%; 
      -ms-transform-origin: 0 100%; 
      -o-transform-origin: 0 100%; 
       transform-origin: 0 100%; 
    } 
    .heart:after { 
     left: 0; 
     -webkit-transform: rotate(45deg); 
      -moz-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
      -o-transform: rotate(45deg); 
       transform: rotate(45deg); 
     -webkit-transform-origin: 100% 100%; 
      -moz-transform-origin: 100% 100%; 
      -ms-transform-origin: 100% 100%; 
      -o-transform-origin: 100% 100%; 
       trans.orm-origin :100% 100%; 
}

미리 감사드립니다.

출처

2013-05-22 Rohit Krishnan

당신이 CSS에서 더 높은 z 순서 설정으로 사업부를 사용하여 텍스트를 오버레이 봤어 여러 줄의 텍스트를 원, 수직으로 중앙에 jQuery를 사용? – lurker

고맙습니다 mbratch - 예 제가 z 주문을 사용했습니다. 하지만 텍스트와 PNG를 결합한 다음 크기를 조정하는 것이 얼마나 효과적인지 잘 모르겠습니다. CSS 모양 안에 텍스트를 포함 할 수 있다면 멋질 것입니다. 그러나 content 속성은 그렇게하지 않습니다! 그것은 두 번 번호를 표시합니다! –

Here 내 솔루션

나는 div 태그 사이에 span을 삽입합니다. 그렇게하면 mbratch와 마찬가지로 z-index 속성을 더 높은 값으로 설정할 수 있습니다. 이것은 position:absolute과 함께 당신이 찾고있는 것을 줄 것입니다.

나는 경우에 당신이

출처

2013-05-22 17:51:36

쿨! 제안을 주셔서 감사합니다 - 나는이 솔루션을 사용하고 tweek 중앙에 중앙에! –

도와 드리겠습니다! 이 대답이 당신을 도왔다면 Upvote 또는 동의하십시오! –

감사합니다. Cody. 나는 대답을 받아 들였다. 나는 upvote에 충분한 포인트가 아직 없다. –

아이콘 내에 텍스트를 표시하는 방법

답변

관련 문제