Icons
We've adopted subset of icons from the wonderful Font Awesome project, and have added our own custom icons to suit the needs of the CenturyLink Platform.
We are using an SVG based implementation for ease of maintainablility and customization. To use an icon, include a <svg> object with class .cyclops-icon. Within the object, specify the id of the icon you wish to use like the following:
<svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-centurylink' /></svg>
If you are going to be dynamically changing your icon using an observable you must have a href attribute to start with otherwise the svg will not render. It would be best practice to set this to the loading or unknown icon for your type.
<svg class="cyclops-icon" aria-hidden="true">
<use xlink:href='#icon-question' data-bind="attr: {'xlink:href': iconObservable}" />
</svg>
Sizes
Icons are available at four sizes. By default, icons are 14x14px. Add .md, .lg, or .xl to increase the size of the icon.
<svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon md" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon lg" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon xl" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
Color
Four basic colors are provided. By default, icons are the same color as text.
<svg class="cyclops-icon md" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon md green" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon md danger" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
<svg class="cyclops-icon md info" aria-hidden="true"><use xlink:href='#icon-hyperscale' /></svg>
Animation
Spin any icon using .cylcops-spin. Remember, with great power comes great responsibility.
<svg class="cyclops-icon cyclops-spin" aria-hidden="true"><use xlink:href='#icon-refresh' /></svg>
<svg class="cyclops-icon cyclops-spin" aria-hidden="true"><use xlink:href='#icon-spinner' /></svg>
Icon Buttons
See the documentation on icon buttons in the buttons section.
Icons inside Headings
When using icons inside of headings there size of the icons is set based on the heading tag
that they are inside. This means that you should not use the standard md,
lg, and xl classes. It is done with way to better vertical align
them with the text.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
<h1><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading One</h1>
<h2><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Two</h2>
<h3><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Three</h3>
<h4><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Four</h4>
<h5><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Five</h5>
<h6><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg> Heading Six</h6>
Available Icons
#icon-angle-down
#icon-angle-left
#icon-angle-right
#icon-angle-up
#icon-arrow-down
#icon-arrow-left
#icon-arrow-right
#icon-arrow-up
#icon-arrows
#icon-arrows-alt
#icon-arrows-h
#icon-arrows-v
#icon-api
#icon-appfog
#icon-archive
#icon-at
#icon-automation
#icon-autoscale
#icon-backup
#icon-ban
#icon-bar-chart
#icon-bare-metal
#icon-bell
#icon-bell-slash
#icon-book
#icon-calendar
#icon-caret-down
#icon-caret-left
#icon-caret-right
#icon-caret-up
#icon-centurylink
#icon-chat
#icon-check
#icon-check-circle
#icon-chevron-down
#icon-chevron-left
#icon-chevron-right
#icon-chevron-up
#icon-circle
#icon-circle-o
#icon-clipboard
#icon-clock
#icon-clone
#icon-close
#icon-cloud-upload
#icon-code-fork
#icon-compliance
#icon-database
#icon-disaster-recovery
#icon-dot-circle-o
#icon-download
#icon-envelope
#icon-ellipsis
#icon-exclamation-circle
#icon-exclamation-triangle
#icon-facebook
#icon-failover
#icon-file
#icon-firewall
#icon-flexibility
#icon-folder
#icon-folder-open
#icon-folder-smart
#icon-git
#icon-globe
#icon-global-network
#icon-hash
#icon-heart
#icon-home
#icon-hyperscale
#icon-info
#icon-info-circle
#icon-infrastructure
#icon-lightbulb
#icon-link
#icon-linkedin
#icon-linux
#icon-list
#icon-load-balancer-dedicated
#icon-load-balancer-shared
#icon-logo-amazon
#icon-logo-google
#icon-logo-microsoft
#icon-lock
#icon-maintenance
#icon-messaging
#icon-microphone
#icon-microphone-mute
#icon-migrate
#icon-minus
#icon-minus-circle
#icon-monitor
#icon-network
#icon-netx
#icon-object-storage
#icon-package
#icon-pause
#icon-permissions
#icon-phone
#icon-phone-end
#icon-phone-square
#icon-pie-chart
#icon-play
#icon-plus
#icon-plus-circle
#icon-policies
#icon-power
#icon-question
#icon-question-circle
#icon-queue
#icon-queue-add
#icon-queue-archive
#icon-queue-delete
#icon-queue-restore
#icon-refresh
#icon-restore
#icon-restore-point-in-time
#icon-runner
#icon-scheduled-tasks
#icon-script
#icon-search
#icon-settings
#icon-shield
#icon-shopping-cart
#icon-snapshot
#icon-spinner
#icon-square-o
#icon-star
#icon-stop
#icon-storage
#icon-support
#icon-switch
#icon-template
#icon-ticket
#icon-times
#icon-toolbox
#icon-trash
#icon-twitter
#icon-windows
#icon-user
#icon-users
#icon-video-camera
#icon-video-camera-mute
#icon-vpn