You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- If using Bootstrap:
For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.
Don't mix with other components
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested and apply the icon classes to the .
Only for use on empty elements
Icon classes should only be used on elements that contain no text content and have no child elements.
Changing the icon font location
Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:
Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
Utilize the relative URLs option provided by the Less compiler.
Change the url() paths in the compiled CSS.
Use whatever option best suits your specific development setup.
Accessible icons
Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.
If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.
If you're creating controls with no other text (such as a that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.
- If using React
In App.js, paste the import code at the top of the file after the React import code
Go back to the React icons page and choose any icon from the Font Awesome icons
Click on the icon to copy it
Go back to your import code in the App.js file
Paste and replace the IconName in the curly braces with the copied icon
Render the icon name as a React element.
Code example
import React, { Component } from 'react';
import { FaHeart } from "react-icons/fa";
class Like extends Component {
render() {
return
}
}
export default Like;
The text was updated successfully, but these errors were encountered:
Uh oh!
There was an error while loading. Please reload this page.
Description
One of the design components that is required for this project's design must be the Icon.
Screenshots
Files
For example, if you are using React , you can use https://mui.com/material-ui/icons/
If you are using Bootstrap, you can use https://getbootstrap.com/docs/3.3/components/
Tasks
- If using Bootstrap:
For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.
Don't mix with other components
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested and apply the icon classes to the .
Only for use on empty elements
Icon classes should only be used on elements that contain no text content and have no child elements.
Changing the icon font location
Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:
Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
Utilize the relative URLs option provided by the Less compiler.
Change the url() paths in the compiled CSS.
Use whatever option best suits your specific development setup.
Accessible icons
Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.
If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.
If you're creating controls with no other text (such as a that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.
- If using React
In App.js, paste the import code at the top of the file after the React import code
Go back to the React icons page and choose any icon from the Font Awesome icons
Click on the icon to copy it
Go back to your import code in the App.js file
Paste and replace the IconName in the curly braces with the copied icon
Render the icon name as a React element.
Code example
The text was updated successfully, but these errors were encountered: