设置 material 图标字体的样式。使 font/icon 边框弯曲
Styling the material icon font. Making the font/icon borders curvy
我在为网站开发 UI 时使用后退箭头图标。
谁不喜欢曲线?
我想要做的是使图标边框弯曲。并减少图标重量。让它变薄。可能苗条。
我使用了字体粗细属性。未应用。
我目前拥有的:
--代码片段在那里--
我需要完成的工作:
由于用户体验很重要,所以我无法通过谷歌搜索找到答案。
.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>
最接近您尝试获得的可能是 -webkit-text-stroke
?
请注意,并非所有浏览器都支持它。 http://caniuse.com/#search=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>
我在为网站开发 UI 时使用后退箭头图标。 谁不喜欢曲线? 我想要做的是使图标边框弯曲。并减少图标重量。让它变薄。可能苗条。 我使用了字体粗细属性。未应用。
我目前拥有的:
我需要完成的工作:
由于用户体验很重要,所以我无法通过谷歌搜索找到答案。
.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>
最接近您尝试获得的可能是 -webkit-text-stroke
?
请注意,并非所有浏览器都支持它。 http://caniuse.com/#search=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>