1

I am using the back arrow icon in developing the UI for a website. Who don't like curves? What i want to do is making the icon borders curvy. and reduce the icon weight. make it thin. May be slim. I used the font weight property. It's not getting applied.

What i have currently now : enter image description here --code snippet is there--

What i need to get done : enter image description here

As UX matters looking for an answers as i couldn't find answers by googling.

.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>
Saiyaff Farouk
  • 5,103
  • 4
  • 24
  • 38
  • It's not possible for a font. For svg image drawn with `stroke` you would use `stroke-linecap: round`. Other than that it's impossible to achieve with resources you have. – JoannaFalkowska Jun 24 '16 at 08:53
  • Oh my bad. Anyways, thanks for the response. To achieve this other than changing the icon isn't there any solution - as you said impossible? @senthe – Saiyaff Farouk Jun 24 '16 at 08:58
  • See my answer with `-webkit-text-stroke`, seems the best option if you don't want to switch to svg for whatever reason. – JoannaFalkowska Jun 24 '16 at 09:00
  • Yeah. that's a wow. maybe moz-text-stroke should work in firefox nah nah? – Saiyaff Farouk Jun 24 '16 at 09:03
  • First, if anything it would be the same property working the same way, second it's not a valid property as Mozilla currently also uses Webkit and `-webkit-text-stroke`. https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke – JoannaFalkowska Jun 24 '16 at 09:04
  • Checked. Such kinda thing is not there for mozilla firefox. – Saiyaff Farouk Jun 24 '16 at 09:05

1 Answers1

2

The closest to what you try to get would be maybe -webkit-text-stroke?

Mind that it's not supported by all browsers. 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>
JoannaFalkowska
  • 2,771
  • 20
  • 37