Font-awesome: Icon request: webcam webcam-off

[tecnoweb]

For use in applications where you need to activate-deactive the user webcam.

[tecnoweb]

why closed?

[tagliala]

Reopening this one but as icon-webcam for tracking and searching purposes

Refer to #1539 for gender icons

[fnagel]

+1

[alteateam]

+1

[joan16v]

+1

[FalkoJoseph]

+1

[dan2k3k4]

+1

[serkanhamarat]

+1

[ocedric]

Definitely +1

[haryanto-darma]

+1

[lauritzt]

+1

[afelicioni]

+1

[zgababa]

+1

[magynhard]

+1

[designarti]

+1

[avaiyakirtib]

+1

[joehillen]

:+1:

[zarybnicky]

+1

[bartbutenaers]

+1

[Startouf]

+1
(Now that github supports voting on posts, I suggest you all do that on the first post)

[pgrodrigues]

+1

[elimartin]

+1

[erralb]

+1

[sensibleworld]

hey folks... do these icons fit the bill, or is there still a need for a webcam-specific icon?

[jesobreira]

@sensibleworld I think there is still seat for a proper webcam icon

[jjp390]

I agree that a proper icon is needed @sensibleworld we're having a hard time because we have two distinct things in our system. The camera is used for video that is uploaded. The webcam is something that is more active where they will be talking with a person.

[m-andrew-albright]

@sensibleworld Has there been any movement on this? My team is using pro, and we were all surprised to find the absence of these icons (webcam / webcam slash).

[BrandonZacharie]

I believe stacks can be used to meet the needs in the examples provided so far (i.e. video + user).

[m-andrew-albright]

@BrandonZacharie They can, but not everyone is equal to the task of designing / laying things out in that manner. I did eventually create a layered set of icons that resembles a webcam, but I did not attempt to do the slash version yet. One font-awesome icon would definitely be preferable to using layers, but I made do.

Here's the layered representation of "webcam" that I was able to eke out:

And the jsx:

import React from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTriangle } from '@fortawesome/pro-solid-svg-icons/faTriangle';
import { faCircle } from '@fortawesome/pro-solid-svg-icons/faCircle';

const WebcamIcon = ({ primaryColor, secondaryColor }) => (
  <span className="fa-layers fa-fw">
    <FontAwesomeIcon
      icon={faTriangle}
      color={primaryColor}
      size="sm"
      transform="shrink-4"
    />
    <FontAwesomeIcon
      icon={faCircle}
      color={primaryColor}
      size="sm"
      transform="shrink-2 up-3"
    />
    <FontAwesomeIcon
      icon={faCircle}
      color={secondaryColor}
      size="sm"
      transform="shrink-6 up-3"
    />
    <FontAwesomeIcon
      icon={faCircle}
      color={primaryColor}
      size="sm"
      transform="shrink-8 up-3"
    />
    <FontAwesomeIcon
      icon={faCircle}
      color={secondaryColor}
      size="xs"
      transform="shrink-10 up-3.5"
    />
    <FontAwesomeIcon
      icon={faCircle}
      color={primaryColor}
      size="xs"
      transform="shrink-9 up-4 right-1"
    />
  </span>
);

WebcamIcon.propTypes = {
  primaryColor: PropTypes.string,
  secondaryColor: PropTypes.string,
};

WebcamIcon.defaultProps = {
  primaryColor: '#000',
  secondaryColor: '#fff',
};

export default WebcamIcon;

I haven't worked with FA5 outside of react, so I am not currently familiar with their SVG/JS APIs, but it should be easy for someone who is to extract the meat of this markup and use it outside of react.

Icons used: faTriangle and faCircle, both are the solid variant.

Good luck! If anyone creates a slash version before I do, please at-mention me so I can check it out. Thanks!

[sensibleworld]

We're watching you:
https://fontawesome.com/icons/webcam?style=solid

We're not watching you:
https://fontawesome.com/icons/webcam-slash?style=solid