FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.57k stars 12.2k forks source link

Icon requests: Motion picture rating icons #8071

Closed mester93 closed 2 months ago

mester93 commented 8 years ago

Hi! :) Please add this motion picture rating icons to the library. Must be kept in color. This are used to classification of the films, and tv shows. Thank you! :)

32px-16_icon_tv_ hungary svg 32px-18_icon_tv_ hungary svg 32px-6_icon_tv_ hungary svg 32px-12_icon_tv_ hungary svg kn_icon_b_ hungary svg x_icon_b_ hungary svg

rmkane commented 8 years ago

Fonts cannot contain multiple colors...

  • Attach a single color image or two that represent the idea you're going for.

See: Requesting new icons

aethior commented 8 years ago

You only need to use fa-circle-o icon and text. Example: http://blog.fontawesome.io/2014/05/19/stacking-text-and-icons/

tagliala commented 8 years ago

Closely related to #6951

mester93 commented 8 years ago

But this icons has two colors...

The problem is that this icons are law based, and it musn't be used in other modified ways. If it can be a future option, please include in updates because it could be helpfull.

tagliala commented 8 years ago

@mester93 font icons are constrained to single color*, if you need multiple color icons you can:


* Yes, I know about this: http://pixelambacht.nl/2014/multicolor-fonts

rmkane commented 8 years ago

@mester93 You can simply stack them as @aethior suggests:

screenshot

http://jsfiddle.net/MrPolywhirl/25bfvxgo/

<span class="icon fa-stack fa-2x">
  <i class="fa fa-circle-thin fa-stack-2x yellow"></i>
  <i class="fa fa-stack-1x text">16</i>
</span>
<span class="icon fa-stack fa-2x">
  <i class="fa fa-circle-thin fa-stack-2x red"></i>
  <i class="fa fa-stack-1x text">18</i>
</span>
<span class="icon fa-stack fa-2x">
  <i class="fa fa-circle-thin fa-stack-2x yellow"></i>
  <i class="fa fa-stack-1x text">6</i>
</span>
<span class="icon fa-stack fa-2x">
  <i class="fa fa-circle-thin fa-stack-2x yellow"></i>
  <i class="fa fa-stack-1x text">12</i>
</span>
<span class="icon fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x green"></i>
  <i class="fa fa-circle-thin fa-stack-1_6x"></i>
</span>
<span class="icon fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x red"></i>
  <i class="fa fa-circle-thin fa-stack-1_6x"></i>
  <i class="fa fa-stack-1x text">&#x2715;</i>
</span>
.text {
  font-family: arial;
  font-weight: bold;
}
.yellow {
  color: #F7ED21;
}
.green {
  color: #80FF00;
}
.red {
  color: #EC3C4A;
}
.fa-stack-1_6x {
  font-size: 1.6em;
  line-height: 1.25em;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
mester93 commented 8 years ago

Great! Thank you! :)

sensibleworld commented 2 months ago

This is a quick update to let folks know that we’re refining our icon request workflow behind the scenes, and as part of that we’re going through all open requests and filing them into several new buckets to be addressed.

In this case we’re closing this issue because we think it might be too niche, or just not a good fit for Font Awesome.

But if you feel really strongly about it, feel free to make your case by submitting a new issue.