1

Web サイトの UI を開発する際に、戻る矢印アイコンを使用しています。曲線が嫌いな人はいますか?私がやりたいのは、アイコンの境界線を曲線にすることです。アイコンの重量を減らします。薄くする。スリムかも。font weight プロパティを使用しました。適用されていません。

私が現在持っているもの: -- ここに画像の説明を入力 コードスニペットがあります--

私が成し遂げる必要があること: ここに画像の説明を入力

UXの問題として、グーグルで答えを見つけることができなかったので、答えを探しています。

.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>

4

1 に答える 1

2

あなたが得ようとしているものに最も近いのは、おそらく-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>

于 2016-06-24T08:56:25.973 に答える