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 (
{/* Startup Command Items */}
{/* Buttons */}
{/* Previous Button */}
<button align="left"><i> Previous color="Orange" isInline={true} onClick={this.handlePreviousPage.bind(this)}/>
{/* Next Button */}
</i></button><i><button align="right">Next <i> color="Orange" isInline={true} onClick={this.handleNextPage.bind(this)}/>
)
}
}</i></button></i>render() {
return (
{/* Current Volumes */}
{/* Buttons */}
{/* Previous Button */}
<button align="left"><i> Previous color="Orange" isInline={true} onClick={this.handlePreviousPage.bind(this)}/>
{/* Next Button */}
</i></button><i><button align="right">Finish <i> color="Orange" isInline={true} onClick={this.handleFinish.bind(this)}/>
);
}
}</i></button></i>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>
{/* SIDEMENU */}
<i></i>Dashboard
<i></i>Members
<i></i><span>Projects</span>}>
{
projects ?
projects.map(p => {
let url = "/organisation/" + selected_organisation.uuid + "/project/" + p.id;
return {p.name}
})
: null
}
<i></i>Image Creator
<i></i>Admin
<i></i>Logout
</div>{/* Run Items */}
{/* Buttons */}
{/* Previous Button */}
<button align="left"><i> Previous color="Orange" isInline={true} onClick={this.handlePreviousPage.bind(this)}/>
{/* Next Button */}
</i></button><i><button align="right">Next <i> color="Orange" isInline={true} onClick={this.handleNextPage.bind(this)}/>
);
}
}</i></button></i><ul>
<li><a href=""><i></i></a></li>
<li><a href=""><i></i></a></li>
<li><a href=""><i></i></a></li>
</ul>
<div>
<i></i>Settings
<i></i>Logout
</div>
<div></div>
{/* BODY */}
<div>
{
isBoxed ?
<div>
{this.props.children}
</div>
:
this.props.children</div>{/* Specify the commands to download the repository (example: git clone http://.... ) */}
{/* Specify the directories local to sync to the fileserver (:) */}
{/* Buttons */}
{/* Previous Button */}
<button align="left"><i> Previous color="Orange" isInline={true} onClick={this.handlePreviousPage.bind(this)}/>
{/* Next Button */}
</i></button><i><button align="right">Next <i> color="Orange" isInline={true} onClick={this.handleNextPage.bind(this)}/>
);
}
}</i></button></i>className={styles.communityIcon}
/>
<div>
<div>
<p>{item.title}</p>
<span>{this.renderElapsedTime()}</span>
</div>
<span>{cheerio.load(item.description).text().trim()}</span>
<div>
<div>
<i>
<span>{item.viewCounter}</span>
</i></div><i>
<div>
<i>
<span>{item.commentCounter}</span>
</i></div><i>
<div>
<i>
<span>{item.scoreTimeshiftReserved}</span>
</i></div><i>
</i></i></i></div><i><i><i>
</i></i></i></div><i><i><i>
);
}
}</i></i></i>members.map((m, key) => {
return (
<li>
<img src="{m.avatar_url}">
<div>
<div>{m.scope}</div>
<div>{m.name}</div>
<div>
<button><i></i></button>
<button><i></i></button>
</div>
</div>
</li>
)
})
}members.map((m, key) => {
return (
<li>
<img src="{m.avatar_url}">
<div>
<div>{m.scope}</div>
<div>{m.name}</div>
<div>
<button><i></i></button>
<button><i></i></button>
</div>
</div>
</li>
)
})
}<div>
<div>
<div>
<p>Personal</p>
<p>One developer</p>
<div>Free</div>
<div>
<ul>
<li>
<i></i> Unlimited projects
</li>
<li>
<i></i> 1-click project install
</li>
<li>
<i></i> Easy project wizard
</li>
<li>
<i></i> Shared projects
</li>
<li>
<i></i> Support
</li>
</ul>
<div></div></div></div></div></div>
