2016-06-24 2 views
1

웹 사이트의 UI를 개발할 때 뒤로 화살표 아이콘을 사용하고 있습니다. 커브가 마음에 들지 않는 사람은 누구입니까? 내가하고 싶은 일은 아이콘 테두리를 매끄럽게 만드는 것입니다. 아이콘의 가중치를 줄입니다. 얇게 만들어라. 슬림 일 수 있습니다. 글꼴 체중 속성을 사용했습니다. 그것은 적용되지 않습니다.재료 아이콘 글꼴 스타일 지정. 글꼴/아이콘 테두리를 매끄럽게 만들기

내가 현재 지금 무엇을 가지고 : UX는 답을 찾는 문제로 enter image description here

나는이 없습니다 : 이 enter image description here --code 조각 내가 수행하는 데 필요한 무엇 there--

입니다 인터넷 검색으로 답변을 찾으십시오.

.nav-left-model { 
 
    display: block; 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 
.nav-left-model .arrow-back-icon { 
 
    float: left; 
 
    padding-top: 9px; 
 
    padding-bottom: 7px; 
 
    padding-left: 12px; 
 
    background-color: #f8faf9; 
 
    width: 45px; 
 
    margin-top: 8px; 
 
    border-radius: 50%; 
 
    font-weight: lighter; 
 
    box-shadow: 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.05); 
 
    margin-right: 0px; 
 
    cursor: pointer; 
 
} 
 
.nav-left-model .arrow-back-icon:hover { 
 
    box-shadow: 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.nav-left-model .arrow-back-icon .arrow-back-icon-element { 
 
    color: #3fce76; 
 
    font-size: 2.5em; 
 
} 
 
.nav-left-model .team-name { 
 
    float: left; 
 
    padding-left: 15px; 
 
    padding-top: 8px; 
 
} 
 
.nav-left-model .team-name .team-name-element { 
 
    font-weight: 300; 
 
    font-size: 34px; 
 
    color: #1f1f1f; 
 
} 
 
.nav-left-model .settings-icon { 
 
    float: left; 
 
    padding-left: 15px; 
 
    padding-top: 25px; 
 
} 
 
.nav-left-model .settings-icon .settings-icon-element { 
 
    color: #cccccc; 
 
    cursor: pointer; 
 
} 
 
.nav-left-model .settings-icon .settings-icon-element:hover { 
 
    color: #b3b3b3; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" rel="stylesheet"/> 
 
<div class="nav-left-model"> 
 
    <div class="arrow-back-icon"><i class="zmdi zmdi-arrow-left arrow-back-icon-element"></i> 
 
    </div> 
 
</div>

+0

그것은 글꼴 수 없습니다. 'stroke '로 그린 svg 이미지의 경우'stroke-linecap : round'를 사용합니다. 그것 이외에 당신이 가진 자원으로 달성하는 것은 불가능합니다. – Senthe

+0

오, 이런. 어쨌든, 응답 주셔서 감사합니다. 아이콘을 변경하는 것 이외의 다른 목적을 달성하기 위해 어떤 해결책도 없습니다. 불가능하다고 말했습니까? @senthe –

+0

'-webkit-text-stroke'를 사용하여 제 대답을보십시오, 어떤 이유로 든 svg로 전환하고 싶지 않은 경우 가장 좋은 옵션 인 것 같습니다. – Senthe

답변

2

당신이 얻을하려고 무엇을 가장 가까운 어쩌면 -webkit-text-stroke 것입니까?

일부 브라우저에서는 지원되지 않습니다.

.nav-left-model { 
 
    display: block; 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 
.nav-left-model .arrow-back-icon { 
 
    float: left; 
 
    padding-top: 9px; 
 
    padding-bottom: 7px; 
 
    padding-left: 12px; 
 
    background-color: #f8faf9; 
 
    width: 45px; 
 
    margin-top: 8px; 
 
    border-radius: 50%; 
 
    font-weight: lighter; 
 
    box-shadow: 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.05); 
 
    margin-right: 0px; 
 
    cursor: pointer; 
 
    -webkit-text-stroke: 1px white; 
 
} 
 
.nav-left-model .arrow-back-icon:hover { 
 
    box-shadow: 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.nav-left-model .arrow-back-icon .arrow-back-icon-element { 
 
    color: #3fce76; 
 
    font-size: 2.5em; 
 
} 
 
.nav-left-model .team-name { 
 
    float: left; 
 
    padding-left: 15px; 
 
    padding-top: 8px; 
 
} 
 
.nav-left-model .team-name .team-name-element { 
 
    font-weight: 300; 
 
    font-size: 34px; 
 
    color: #1f1f1f; 
 
} 
 
.nav-left-model .settings-icon { 
 
    float: left; 
 
    padding-left: 15px; 
 
    padding-top: 25px; 
 
} 
 
.nav-left-model .settings-icon .settings-icon-element { 
 
    color: #cccccc; 
 
    cursor: pointer; 
 
} 
 
.nav-left-model .settings-icon .settings-icon-element:hover { 
 
    color: #b3b3b3; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" rel="stylesheet"/> 
 
<div class="nav-left-model"> 
 
    <div class="arrow-back-icon"><i class="zmdi zmdi-arrow-left arrow-back-icon-element"></i> 
 
    </div> 
 
</div>
http://caniuse.com/#search=text-stroke