Added glyphicon support for icons
This commit is contained in:
parent
d87e5b0bd1
commit
63d96d0a2e
3 changed files with 11 additions and 5 deletions
|
@ -28,9 +28,15 @@ export default class Item extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
let icon;
|
let icon;
|
||||||
if (this.props.icon) {
|
if (this.props.icon) {
|
||||||
icon = (
|
if (this.props.icon.startsWith('ion')) {
|
||||||
<i className={'icon ' + this.props.icon}></i>
|
icon = (
|
||||||
);
|
<i className={'icon ' + this.props.icon} />
|
||||||
|
);
|
||||||
|
} else if (this.props.icon.startsWith('glyphicon')) {
|
||||||
|
icon = (
|
||||||
|
<span className={'glyphicon ' + this.props.icon} aria-hidden="true" />
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<li><a href={this.state.url}>{icon}{this.props.children}</a></li>
|
<li><a href={this.state.url}>{icon}{this.props.children}</a></li>
|
||||||
|
|
|
@ -35,7 +35,7 @@ export default class NavBar extends React.Component {
|
||||||
<Dropdown title="College">
|
<Dropdown title="College">
|
||||||
<Item ident="robotics:index">Student Robotics</Item>
|
<Item ident="robotics:index">Student Robotics</Item>
|
||||||
<Item href="#" icon="ion-cube">Attack on Blocks Game</Item>
|
<Item href="#" icon="ion-cube">Attack on Blocks Game</Item>
|
||||||
<Item href="#">Student Server</Item>
|
<Item href="#" icon="glyphicon-hdd">Student Server</Item>
|
||||||
<Item href="#" icon="ion-ios-paper">EPQ</Item>
|
<Item href="#" icon="ion-ios-paper">EPQ</Item>
|
||||||
<Item href="#">Wall of Sheep</Item>
|
<Item href="#">Wall of Sheep</Item>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
|
|
@ -78,7 +78,7 @@
|
||||||
}
|
}
|
||||||
margin: 0;
|
margin: 0;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
i + * {
|
i + *, .glyphicon + * {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
& .container-fluid{
|
& .container-fluid{
|
||||||
|
|
Reference in a new issue