How to use font-awesome - 10 common examples
To help you get started, we’ve selected a few font-awesome examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
thebillkidy / Brewr-Site / frontend / src / components / elements / Builder / step4.js View on Github 
console.log(dockerfile.cmd);
return (
<FlexContainer>
{/* Startup Command Items */}
<Panel heading="Environment Startup Commands">
<CRUDList items={dockerfile.cmd} textAddValue="Startup Command" ref="input_startup_command_items"/>
</Panel>
{/* Buttons */}
<Panel size="full">
{/* Previous Button */}
<Button align="left" text=<span><i className={cx(fa.fa, fa['fa-angle-left'])}/> Previous</span> color="Orange" isInline={true} onClick={this.handlePreviousPage.bind(this)}/>
{/* Next Button */}
<Button align="right" text=<span>Next <i className={cx(fa.fa, fa['fa-angle-right'])}/></span> color="Orange" isInline={true} onClick={this.handleNextPage.bind(this)}/>
</Panel>
</FlexContainer>
)
}
}render() {
return (
<FlexContainer>
{/* Current Volumes */}
<Panel heading="Finalize">
<DockerfileViewer dockerFileObject={this.props.imageParams} />
</Panel>
{/* Buttons */}
<Panel size="full">
{/* Previous Button */}
<Button align="left" text=<span><i className={cx(fa.fa, fa['fa-angle-left'])}/> Previous</span> color="Orange" isInline={true} onClick={this.handlePreviousPage.bind(this)}/>
{/* Next Button */}
<Button align="right" text=<span>Finish <i className={cx(fa.fa, fa['fa-angle-right'])}/></span> color="Orange" isInline={true} onClick={this.handleFinish.bind(this)}/>
</Panel>
</FlexContainer>
);
}
}render() {
// If we are not logged in, do not render anything.
if (!AuthStore.isLoggedIn) {
return (<div></div>);
}
var self = this;
const { title, isBoxed, history } = this.props;
const { user, organisations, selected_organisation } = this.state;
const teamLink = selected_organisation ? "/organisation/" + selected_organisation.uuid + "/members" : "";
const projects = selected_organisation ? selected_organisation.projects : [];
return (
<div className={styles.Container}>
{/* SIDEMENU */}
<SideMenu title="brewr">
<SideMenuItem link="/dashboard"><i className={cx(fa.fa, fa['fa-home'])}></i>Dashboard</SideMenuItem>
<SideMenuItem link={teamLink}><i className={cx(fa.fa, fa['fa-group'])}></i>Members</SideMenuItem>
<SideMenuContainer title={<span><i className={cx(fa.fa, fa['fa-folder'])}></i><span>Projects</span></span>}>
{
projects ?
projects.map(p => {
let url = "/organisation/" + selected_organisation.uuid + "/project/" + p.id;
return <SideMenuItem key={p.name} link={url}>{p.name}</SideMenuItem>
})
: null
}
</SideMenuContainer>
<SideMenuItem link="/builder"><i className={cx(fa.fa, fa['fa-gears'])}></i>Image Creator</SideMenuItem>
<SideMenuItem link="/organisation/1/admin"><i className={cx(fa.fa, fa['fa-lock'])}></i>Admin</SideMenuItem>
<SideMenuItem link="/logout" isStickBottom={true}><i className={cx(fa.fa, fa['fa-sign-out'])}></i>Logout</SideMenuItem>
</SideMenu>
<forms.RenderForm form={f} ref="formObject" />
</form>
</Panel>
{/* Run Items */}
<Panel heading="Install Programs & Tools" tooltip={tooltipRunItems}>
<CRUDList items={dockerfile.run} ref="input_run_items"/>
</Panel>
{/* Buttons */}
<Panel size="full">
{/* Previous Button */}
<Button align="left" text=<span><i className={cx(fa.fa, fa['fa-angle-left'])}/> Previous</span> color="Orange" isInline={true} onClick={this.handlePreviousPage.bind(this)}/>
{/* Next Button */}
<Button align="right" text=<span>Next <i className={cx(fa.fa, fa['fa-angle-right'])}/></span> color="Orange" isInline={true} onClick={this.handleNextPage.bind(this)}/>
</Panel>
</FlexContainer>
);
}
}<Divider align="vertical" />
<ul>
<li><a href=""><i className={cx(fa.fa, fa['fa-bell'])}></i></a></li>
<li><a href=""><i className={cx(fa.fa, fa['fa-bell'])}></i></a></li>
<li><a href=""><i className={cx(fa.fa, fa['fa-bell'])}></i></a></li>
</ul>
<div className={styles.UserPreview}>
<DropdownMenu title={user.name}>
<DropdownMenuItem>
<Link to="/user/settings"><i className={cx(fa.fa, fa['fa-cog'])}></i>Settings</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link to="/logout"><i className={cx(fa.fa, fa['fa-sign-out'])}></i>Logout</Link>
</DropdownMenuItem>
</DropdownMenu>
</div>
<div className={styles.clear}></div>
</div>
{/* BODY */}
<div className={styles['Page-Container']}>
{
isBoxed ?
<div className={styles['Page-Content']}>
{this.props.children}
</div>
:
this.props.children</Panel>
{/* Specify the commands to download the repository (example: git clone http://.... <destinationfolder>) */}
<Panel heading="Download Source Code">
<CRUDList items={dockerfile.source_code} textAddValue="Command" ref="input_run_items"/>
</Panel>
{/* Specify the directories local to sync to the fileserver (<local_dir>:<remote_dir>) */}
<Panel heading="Synchronise Directories">
<CRUDList items={dockerfile.volume} textAddValue="Directory" ref="input_volume_items"/>
</Panel>
{/* Buttons */}
<Panel size="full">
{/* Previous Button */}
<Button align="left" text=<span><i className={cx(fa.fa, fa['fa-angle-left'])}/> Previous</span> color="Orange" isInline={true} onClick={this.handlePreviousPage.bind(this)}/>
{/* Next Button */}
<Button align="right" text=<span>Next <i className={cx(fa.fa, fa['fa-angle-right'])}/></span> color="Orange" isInline={true} onClick={this.handleNextPage.bind(this)}/>
</Panel>
</FlexContainer>
);
}
}className={styles.communityIcon}
/>
</div>
<div className={styles.info}>
<div className={styles.header}>
<p className={selected ? styles.selectedTitle : styles.title}>{item.title}</p>
<span className={styles.elapsedTime}>{this.renderElapsedTime()}</span>
</div>
<span className={styles.description}>{cheerio.load(item.description).text().trim()}</span>
<div className={styles.countContainer}>
<div className={styles.countItem}>
<i className={`${fa.fa} ${fa['fa-user-o']} ${styles.icon}`} />
<span>{item.viewCounter}</span>
</div>
<div className={styles.countItem}>
<i className={`${fa.fa} ${fa['fa-commenting-o']} ${styles.icon}`} />
<span>{item.commentCounter}</span>
</div>
<div className={styles.countItem}>
<i className={`${fa.fa} ${fa['fa-clock-o']} ${styles.icon}`} />
<span>{item.scoreTimeshiftReserved}</span>
</div>
</div>
</div>
</div>
</div>
);
}
}members.map((m, key) => {
return (
<li key={key}>
<Image src={m.avatar_url} defaultSrc={require('./avatar.png')}/>
<div>
<div className={styles.member_scope}>{m.scope}</div>
<div className={styles.member_name}>{m.name}</div>
<div className={styles.member_actions}>
<button onClick={this._promoteToManager.bind(this, m.id)} className={styles.member_action}><i className={cx(fa.fa, fa['fa-star-o'])}></i></button>
<button onClick={this._removeMember.bind(this, m.id)} className={styles.member_action}><i className={cx(fa.fa, fa['fa-remove'])}></i></button>
</div>
</div>
</li>
)
})
}members.map((m, key) => {
return (
<li key={key}>
<Image src={m.avatar_url} defaultSrc={require('./avatar.png')}/>
<div>
<div className={styles.member_scope}>{m.scope}</div>
<div className={styles.member_name}>{m.name}</div>
<div className={styles.member_actions}>
<button onClick={this._promoteToManager.bind(this, m.id)} className={styles.member_action}><i className={cx(fa.fa, fa['fa-star-o'])}></i></button>
<button onClick={this._removeMember.bind(this, m.id)} className={styles.member_action}><i className={cx(fa.fa, fa['fa-remove'])}></i></button>
</div>
</div>
</li>
)
})
}<div className={purecss['pure-g']}>
<div className={classNames(purecss['pure-u-md-1-2'], styles['align-right'])}>
<div className={styles.plan}>
<p className={styles.title}>Personal</p>
<p className={styles.subtitle}>One developer</p>
<div className={styles.price}>Free</div>
<div className={styles['padding-half']}>
<ul>
<li>
<i className={classNames(fa.fa, fa['fa-check'], styles['text-success'])}></i> Unlimited projects
</li>
<li>
<i className={classNames(fa.fa, fa['fa-check'], styles['text-success'])}></i> 1-click project install
</li>
<li>
<i className={classNames(fa.fa, fa['fa-check'], styles['text-success'])}></i> Easy project wizard
</li>
<li className={styles.disabled}>
<i className={classNames(fa.fa, fa['fa-times'], styles['text-accent'])}></i> Shared projects
</li>
<li className={styles.disabled}>
<i className={classNames(fa.fa, fa['fa-times'], styles['text-accent'])}></i> Support
</li>
</ul>
<div className={styles['spacer-half']}></div>
Popular font-awesome functions
Popular JavaScript code snippets
Find secure code to use in your application or website