5 - Icons
Icons can be helpfull when communicating ideas or concepts. Use them wisely and don't rely on an icon alone to convey meaning.
5.1 - Section icons
The section-icon is rarely used alone, but rather as a part of other more complex components.
<div class="section-icon"> <span class="icon-Chat-active"></span> </div>
5.1.1 - Size
Force a constant size of the section-icon.
<div class="section-icon large"> <span class="icon-Chat-active"></span> </div> <div class="section-icon small"> <span class="icon-Chat-active"></span> </div> <div class="section-icon tiny"> <span class="icon-Chat-active"></span> </div>
5.1.2 - Icon font, Images and SVG
The icon font, images or svg can be used as to create the icons.
<div class="section-icon">
<span class="icon-Chat-active"></span>
</div>
<div class="section-icon">
<img src="http://gfx.dagbladet.no/styleguide/icons/icon-chat-active.png" />
</div>
<div class="section-icon">
<svg viewBox="0 0 60 60">
<path d="M30.399,4.246C13.866,3.92,0.257,14.108,0.004,27c-0.088,4.482,1.45,8.701,4.188,12.312H4.191c4.709,6.05-0.43,16.45-0.43,16.45l15.174-6.535c3.269,1.033,6.822,1.635,10.544,1.708c16.533,0.326,30.141-9.862,30.395-22.755C60.129,15.287,46.932,4.572,30.399,4.246z M17.14,31.298c-2.037,0-3.688-1.651-3.688-3.688c0-2.037,1.651-3.688,3.688-3.688s3.688,1.651,3.688,3.688C20.828,29.647,19.177,31.298,17.14,31.298z M29.433,31.298c-2.037,0-3.688-1.651-3.688-3.688c0-2.037,1.651-3.688,3.688-3.688s3.688,1.651,3.688,3.688C33.121,29.647,31.47,31.298,29.433,31.298z M41.725,31.298c-2.037,0-3.688-1.651-3.688-3.688c0-2.037,1.651-3.688,3.688-3.688c2.037,0,3.688,1.651,3.688,3.688C45.413,29.647,43.762,31.298,41.725,31.298z"/>
</svg>
</div> 5.2 - Icon font
We have a huge set of icons accessible as a icon font. Listed is the classes needed to use them. We use the Private Use (Unicode) range to avoid conflicts with actual letters. Don't use the UTF code in other contexts as these might change i future versions of the icon-font. NOTE: It's easy to see that the list of icons is overkill. The initial icon font was a conversion of Helveticons Basic, then there was some additional sets released and added, then over time, also some custom icons.
.icon-Dagbladet \e883
.icon-Dagbladet-alt \e884
.icon-DBiD-db \e885
.icon-DBiD-id \e886
.icon-YouTube \e6e8
.icon-Yahoo \e6e9
.icon-XBL \e6ea
.icon-Wordpress \e6eb
.icon-Vimeo \e6ec
.icon-Twitter \e6ed
.icon-Tumblr \e6ee
.icon-Technorati \e6ef
.icon-StumbleUpon \e6f0
.icon-Skype \e6f1
.icon-MSNMessenger \e6f3
.icon-Linkedin \e6f4
.icon-Lastfm \e6f5
.icon-Google \e6f6
.icon-Flickr \e6f8
.icon-Facebook \e6f9
.icon-Delicious \e6fb
.icon-Amazon \e6fe
.icon-Zip \e600
.icon-Yenbag \e601
.icon-Wineglass \e602
.icon-Width \e603
.icon-War \e604
.icon-Wallet \e605
.icon-Wallplug \e606
.icon-Userfemales \e607
.icon-Userfemales-alt \e608
.icon-Userfemale \e609
.icon-Usbconnector \e60a
.icon-Undo \e60b
.icon-Tv \e60c
.icon-Tvold \e60d
.icon-Truck \e60e
.icon-Trophy \e60f
.icon-Tree \e610
.icon-Train \e611
.icon-Traffic-alt \e612
.icon-Top \e613
.icon-Timer \e614
.icon-Ticket \e615
.icon-Theif \e616
.icon-Theater \e617
.icon-Temperature \e618
.icon-Temperatrure-alt \e619
.icon-Takeaway-cup \e61a
.icon-Tabkey \e61b
.icon-T-shirt \e61c
.icon-Sweatshirt \e61d
.icon-Sunny \e61e
.icon-Stream \e61f
.icon-Stophand \e620
.icon-Stacked-disks \e621
.icon-Ssd \e622
.icon-Split \e623
.icon-Split-alt \e624
.icon-Speedgauge \e625
.icon-Spades \e626
.icon-Snow \e627
.icon-Smiley \e628
.icon-Smiley-inverted \e629
.icon-Sleep \e62a
.icon-Single-note \e62b
.icon-Simcard \e62c
.icon-Sience \e62d
.icon-Shorts \e62e
.icon-Shoppingbasket-alt-2 \e62f
.icon-Shoe \e630
.icon-Shipping \e631
.icon-Shipping-box \e632
.icon-Sharing-iphone \e633
.icon-Share-alt \e634
.icon-Server \e635
.icon-Server-alt \e636
.icon-Scull \e637
.icon-Save \e638
.icon-Satellite-dish \e639
.icon-Safedial \e63a
.icon-Safe \e63b
.icon-Ruler \e63c
.icon-Ruler-alt \e63d
.icon-Rocket \e63e
.icon-Roadsign \e63f
.icon-Road \e640
.icon-Redo \e641
.icon-Receipt-yen \e642
.icon-Receipt-pound \e643
.icon-Receipt-euro \e644
.icon-Receipt-dollar \e645
.icon-Re-post \e646
.icon-Rain \e647
.icon-Radioreceiver \e648
.icon-Quote \e649
.icon-Qrcode \e64a
.icon-Pulse \e64b
.icon-Price-yen \e64c
.icon-Price-pound \e64d
.icon-Price-euro \e64e
.icon-Price-dollar \e64f
.icon-Poweroutlet \e650
.icon-Pound-bag \e651
.icon-Post-it \e652
.icon-Playlist \e653
.icon-Playingcards \e654
.icon-Planet \e655
.icon-Plane \e656
.icon-Piracy \e657
.icon-Piggybank \e658
.icon-People-alt-2 \e659
.icon-Pc \e65a
.icon-Path \e65b
.icon-Pastein \e65c
.icon-Partly-cloudy \e65d
.icon-Parental-control \e65e
.icon-Pants \e65f
.icon-Paintroller \e660
.icon-Old-key \e661
.icon-Network-alt \e662
.icon-Navigational-arrow \e663
.icon-Navigation-road \e664
.icon-Namebadge \e665
.icon-Mountain \e666
.icon-Molecular \e667
.icon-Molecular-network \e668
.icon-Mindmap \e669
.icon-Merge \e66a
.icon-Megaphone \e66b
.icon-Medicine \e66c
.icon-Medical-emergency \e66d
.icon-Male-symbol \e66e
.icon-Male-and-female \e66f
.icon-Magnet \e670
.icon-Linux-tux \e671
.icon-Lightning \e672
.icon-Lense \e673
.icon-Legal \e674
.icon-Layers \e675
.icon-Layers-alt \e676
.icon-Lab \e677
.icon-Keyhole \e678
.icon-iPad \e679
.icon-iMac \e67a
.icon-Hourglass \e67b
.icon-Height \e67c
.icon-Hearts \e67d
.icon-Hat \e67e
.icon-Harddrive \e67f
.icon-Handprint \e680
.icon-Grid \e681
.icon-Gps \e682
.icon-Globe-alt \e683
.icon-Geometry \e684
.icon-Frame \e685
.icon-Frame-alt \e686
.icon-Forking \e687
.icon-Food \e688
.icon-Flowerpot \e689
.icon-Fingerprint \e68a
.icon-Filter \e68b
.icon-Female-symbol \e68c
.icon-Euro-bag \e68d
.icon-Escape \e68e
.icon-Energy-saving-bulb \e68f
.icon-Economy \e690
.icon-Eco \e691
.icon-Download-alt \e692
.icon-Donate \e693
.icon-Dollar-bag \e694
.icon-Document-dashed-line \e695
.icon-Dockconnector \e696
.icon-Dna \e697
.icon-Directions \e698
.icon-Directions-alt \e699
.icon-Dice \e69a
.icon-Diamonds \e69b
.icon-Diamond \e69c
.icon-Diagnostics \e69d
.icon-Desk \e69e
.icon-Departure \e69f
.icon-Deletekey \e6a0
.icon-Crosshair \e6a1
.icon-Crop \e6a2
.icon-Conversation-alt \e6a3
.icon-Console \e6a4
.icon-Compress \e6a5
.icon-Combinationlock \e6a6
.icon-Combinationlock-open \e6a7
.icon-Comb \e6a8
.icon-Coins \e6a9
.icon-Coins-yen \e6aa
.icon-Coins-yen-alt \e6ab
.icon-Coins-pound \e6ac
.icon-Coins-pound-alt \e6ad
.icon-Coins-euro \e6ae
.icon-Coins-euro-alt \e6af
.icon-Coins-dollar \e6b0
.icon-Coins-dollar-alt \e6b1
.icon-Coins-alt \e6b2
.icon-Coin \e6b3
.icon-Coin-yen \e6b4
.icon-Coin-pound \e6b5
.icon-Coin-euro \e6b6
.icon-Coin-dollar \e6b7
.icon-Coffee \e6b8
.icon-Cocktail \e6b9
.icon-Clubs \e6ba
.icon-Cloudy \e6bb
.icon-Clotheshanger \e6bc
.icon-Circus \e6bd
.icon-Cinema \e6be
.icon-Chip \e6bf
.icon-Chip-alt \e6c0
.icon-Chess \e6c1
.icon-Chart-curve \e6c2
.icon-Car \e6c3
.icon-Candy \e6c4
.icon-Cameraroll \e6c5
.icon-Calculator \e6c6
.icon-Bus \e6c7
.icon-Brush-alt \e6c8
.icon-Brush-alt2 \e6c9
.icon-Briefcase \e6ca
.icon-Brick \e6cb
.icon-Box-open \e6cc
.icon-Box-alt \e6cd
.icon-Books \e6ce
.icon-Bones \e6cf
.icon-Bird \e6d0
.icon-Bills \e6d1
.icon-Bills-yen \e6d2
.icon-Bills-pound \e6d3
.icon-Bills-euro \e6d4
.icon-Bills-dollar \e6d5
.icon-Bill \e6d6
.icon-Bill-yen \e6d7
.icon-Bill-pound \e6d8
.icon-Bill-euro \e6d9
.icon-Bill-dollar \e6da
.icon-Beerglass \e6db
.icon-Barcode \e6dc
.icon-Band-aid \e6dd
.icon-Ball \e6de
.icon-Backspace \e6df
.icon-Babystroller \e6e0
.icon-Award \e6e1
.icon-Autofill \e6e2
.icon-Article \e6e3
.icon-Arrivals \e6e4
.icon-Alarmclock \e6e5
.icon-Activity \e6e6
.icon-3D-glasses \e6e7
.icon-Windowsizes \e6ff
.icon-Window-popin \e700
.icon-Weight \e701
.icon-Userglasses \e702
.icon-Trash-alt-2 \e703
.icon-Thoughtbubble \e704
.icon-Tactics \e705
.icon-Store \e706
.icon-Stamp \e707
.icon-Squigglyline \e708
.icon-Sprout \e709
.icon-Speaker \e70a
.icon-Soundwaves \e70b
.icon-Sitemap \e70c
.icon-Share-alt-2 \e70d
.icon-Settings-alt \e70e
.icon-Settings-alt-2 \e70f
.icon-Sensor \e710
.icon-Securitycamera \e711
.icon-School \e712
.icon-Sandbox-toys \e713
.icon-Right-double-arrow \e714
.icon-Return-to-top \e715
.icon-Remote \e716
.icon-Reception \e717
.icon-Receipt-alt \e718
.icon-Projector \e719
.icon-Presentation \e71a
.icon-Poll \e71b
.icon-Pokerchip \e71c
.icon-Photoalbum \e71d
.icon-Phonering \e71e
.icon-People-female \e71f
.icon-Parachute-drop \e720
.icon-Paperplane \e721
.icon-Paperplane-alt \e722
.icon-Paperbag \e723
.icon-Palette \e724
.icon-Pageup \e725
.icon-Pagedown \e726
.icon-Operator \e727
.icon-Old-phone \e728
.icon-Notepad-alt \e729
.icon-Nodes \e72a
.icon-Newspaper \e72b
.icon-Newspaper-alt \e72c
.icon-Multiple-windows \e72d
.icon-Multiple-creditcards \e72e
.icon-Microscope \e72f
.icon-Message-unopened \e730
.icon-Megaphone-2 \e731
.icon-Meeting \e732
.icon-Map-marker \e733
.icon-Map-loaction \e734
.icon-Loupe \e735
.icon-Logout \e736
.icon-Location-nearby \e737
.icon-Location-nearme \e738
.icon-Library \e739
.icon-Left-double-arrow \e73a
.icon-Keychain \e73b
.icon-Junk \e73c
.icon-Item-arrangement \e73d
.icon-Invoice \e73e
.icon-Inbox-full \e73f
.icon-Headset \e740
.icon-Harddrive-alt \e741
.icon-Handshake \e742
.icon-Graduate \e743
.icon-Globe-inverted-europe-africa \e744
.icon-Globe-inverted-asia \e745
.icon-Globe-inverted-america \e746
.icon-Globe-europe-africa \e747
.icon-Globe-asia \e748
.icon-Glasses \e749
.icon-Footprints \e74a
.icon-Folders \e74b
.icon-Folder-outline \e74c
.icon-Flashlight \e74d
.icon-Firewall \e74e
.icon-Fire \e74f
.icon-Filter-arrows \e750
.icon-Files \e751
.icon-Filecabinet \e752
.icon-Facebook-like \e753
.icon-Drop \e754
.icon-Door-open \e755
.icon-Door-open-alt \e756
.icon-Diskimage \e757
.icon-Diploma \e758
.icon-Diploma-alt \e759
.icon-Diagonal-arrow \e75a
.icon-Diagonal-arrow-alt \e75b
.icon-Desktop \e75c
.icon-Defrag \e75d
.icon-Cupcake \e75e
.icon-Crown \e75f
.icon-Crown-alt \e760
.icon-Columns \e761
.icon-Clouddrive \e762
.icon-Circuits \e763
.icon-Circle-dotted \e764
.icon-Circle-dotted-active \e765
.icon-Certificate \e766
.icon-Categories \e767
.icon-Cashregister \e768
.icon-Browserwindow \e769
.icon-Brackets \e76a
.icon-Bomb \e76b
.icon-Boat-shipping \e76c
.icon-Blueprint \e76d
.icon-Birthdaycake \e76e
.icon-Binoculars \e76f
.icon-Binary-code \e770
.icon-Billboard \e771
.icon-Award-2 \e772
.icon-Auctionhammer \e773
.icon-Art-easel \e774
.icon-Application-window \e775
.icon-Application-window-alt \e776
.icon-Application-error \e777
.icon-App \e778
.icon-Anchor \e779
.icon-Zoom-out \e77a
.icon-Zoom-in \e77b
.icon-Z-axis-rotation \e77c
.icon-Y-axis-rotation \e77d
.icon-X-axis-rotation \e77e
.icon-Wrong \e77f
.icon-Wrench \e780
.icon-Windows \e781
.icon-Wifi \e782
.icon-Wand \e783
.icon-Voice \e784
.icon-Video \e785
.icon-Vcard \e786
.icon-Utilities \e787
.icon-Users \e788
.icon-Users-alt \e789
.icon-User \e78a
.icon-Usb \e78b
.icon-Unlocked \e78c
.icon-Universal \e78d
.icon-Umbrella \e78e
.icon-Trash \e78f
.icon-Trash-alt \e790
.icon-Trafic \e791
.icon-Tools \e792
.icon-Time \e793
.icon-Thumbnails \e794
.icon-Thumbnails-small \e795
.icon-Thumbnail-list \e796
.icon-Thumb-up \e797
.icon-Thumb-down \e798
.icon-Terminal \e799
.icon-Target \e79a
.icon-Tags \e79b
.icon-Tag \e79c
.icon-Tab \e79d
.icon-Sync \e79e
.icon-Stop \e79f
.icon-Stop-alt \e7a0
.icon-Sound \e7a1
.icon-Sound-off \e7a2
.icon-Sound-medium \e7a3
.icon-Sound-low \e7a4
.icon-Slideshow \e7a5
.icon-Shuffle \e7a6
.icon-Shoppingbasket \e7a7
.icon-Shoppingbasket-alt \e7a8
.icon-Shift \e7a9
.icon-Shield \e7aa
.icon-Share \e7ab
.icon-Settings \e7ac
.icon-Search \e7ad
.icon-Script \e7ae
.icon-Script-alt \e7af
.icon-Screensharing \e7b0
.icon-Scan \e7b1
.icon-Rss \e7b2
.icon-Resize \e7b3
.icon-Reply-arrow \e7b4
.icon-Repeat \e7b5
.icon-Repeat-one \e7b6
.icon-Remove \e7b7
.icon-Refresh \e7b8
.icon-Record \e7b9
.icon-Read-only \e7ba
.icon-Rate \e7bb
.icon-Radio \e7bc
.icon-Radio-alt \e7bd
.icon-Pushpin \e7be
.icon-Printer-alt \e7bf
.icon-Print \e7c0
.icon-Previous \e7c1
.icon-Previous-media \e7c2
.icon-Power \e7c3
.icon-Podcast \e7c4
.icon-Plugin \e7c5
.icon-Play \e7c6
.icon-Pin-location \e7c7
.icon-Piechart \e7c8
.icon-Pictures \e7c9
.icon-Pictures-alt \e7ca
.icon-Pictures-alt-2 \e7cb
.icon-Picture \e7cc
.icon-Phone \e7cd
.icon-People \e7ce
.icon-People-alt \e7cf
.icon-Pause \e7d0
.icon-Pannel-close \e7d1
.icon-Panel-show \e7d2
.icon-Page-restricted \e7d3
.icon-Page-remove \e7d4
.icon-Page-add \e7d5
.icon-Outdent \e7d6
.icon-Out-box \e7d7
.icon-Out \e7d8
.icon-Osx \e7d9
.icon-Ordered-list \e7da
.icon-Notepad \e7db
.icon-Next \e7dc
.icon-Next-media \e7dd
.icon-Navigation \e7de
.icon-Navigation-vertical \e7df
.icon-Navigation-up \e7e0
.icon-Navigation-top \e7e1
.icon-Navigation-right \e7e2
.icon-Navigation-left \e7e3
.icon-Navigation-last \e7e4
.icon-Navigation-horizontal \e7e5
.icon-Navigation-first \e7e6
.icon-Navigation-down \e7e7
.icon-Navigation-bottom \e7e8
.icon-Music \e7e9
.icon-Movie \e7ea
.icon-Movie-alt \e7eb
.icon-Mouse \e7ec
.icon-Mousecursor \e7ed
.icon-Mobile \e7ee
.icon-Message \e7ef
.icon-Message-open \e7f0
.icon-Medal \e7f1
.icon-Map \e7f2
.icon-Map-alt \e7f3
.icon-Mailbox \e7f4
.icon-Logout-2 \e7f5
.icon-Lock \e7f6
.icon-Locate \e7f7
.icon-Loading \e7f8
.icon-Load \e7f9
.icon-List \e7fa
.icon-Link \e7fb
.icon-Lightbulb \e7fc
.icon-Lightbulb-active \e7fd
.icon-Light-up \e7fe
.icon-Light-down \e7ff
.icon-Layout \e800
.icon-Laptop \e801
.icon-Keyboard \e802
.icon-Key \e803
.icon-Iphone \e804
.icon-Info \e805
.icon-Infinity \e806
.icon-Indent \e807
.icon-Inbox \e808
.icon-Inactive-line \e809
.icon-Home \e80a
.icon-Help \e80b
.icon-Help-alt \e80c
.icon-Headphones \e80d
.icon-HD \e80e
.icon-Handtool \e80f
.icon-Handtool-alt \e810
.icon-Handpointer \e811
.icon-Handpointer-alt \e812
.icon-Handactive \e813
.icon-Handactive-alt \e814
.icon-Hammer \e815
.icon-Globe \e816
.icon-Gift \e817
.icon-Game \e818
.icon-Fullscreen \e819
.icon-Fullscreen-alt \e81a
.icon-Font \e81b
.icon-Folder \e81c
.icon-Folder-open \e81d
.icon-Flash \e81e
.icon-Flag \e81f
.icon-Flag-alt \e820
.icon-Firewire \e821
.icon-Favorite \e822
.icon-Factory \e823
.icon-Eye \e824
.icon-Exit-fullscreen \e825
.icon-Ethernet \e826
.icon-Equalizer \e827
.icon-Enter \e828
.icon-Employee \e829
.icon-Eject \e82a
.icon-Edit \e82b
.icon-Download \e82c
.icon-Documents \e82d
.icon-Document \e82e
.icon-Display \e82f
.icon-Disc \e830
.icon-Delete \e831
.icon-Dashboard \e832
.icon-Cut \e833
.icon-Curve \e834
.icon-Creditcard \e835
.icon-Creditcard-alt \e836
.icon-Coverflow \e837
.icon-Conversation \e838
.icon-Contrast \e839
.icon-Connection \e83a
.icon-Company \e83b
.icon-Command \e83c
.icon-Color-picker \e83d
.icon-Color-bucket \e83e
.icon-Code \e83f
.icon-Cloud \e840
.icon-Cloud-upload \e841
.icon-Client \e842
.icon-Checkbox \e843
.icon-Checkbox-empty \e844
.icon-Checkbox-dotted \e845
.icon-Checkbox-dotted-active \e846
.icon-Check \e847
.icon-Chat \e848
.icon-Chat-active \e849
.icon-Chart \e84a
.icon-Capslock \e84b
.icon-Camcorder \e84c
.icon-Calendar \e84d
.icon-Calendar-alt \e84e
.icon-Burn \e84f
.icon-Bulleted-list \e850
.icon-Bug \e851
.icon-Brush \e852
.icon-Box \e853
.icon-Bookmark \e854
.icon-Book \e855
.icon-Book-alt \e856
.icon-Book-alt-2 \e857
.icon-Bluetooth \e858
.icon-Block \e859
.icon-Bell \e85a
.icon-Bell-off \e85b
.icon-Battery-low \e85c
.icon-Battery-full \e85d
.icon-Bars \e85e
.icon-Barchart \e85f
.icon-Badge-restricted \e860
.icon-Badge-remove \e861
.icon-Badge-count \e862
.icon-Badge-add \e863
.icon-Attachment \e864
.icon-Arrow-up \e865
.icon-Arrow-right \e866
.icon-Arrow-left \e867
.icon-Arrow-down \e868
.icon-Alt \e869
.icon-Alert \e86a
.icon-Alert-alt \e86b
.icon-Adressbook \e86c
.icon-Add \e86d
.icon-3d \e86e
.icon-Dice-6 \e86f
.icon-Dice-5 \e870
.icon-Dice-4 \e871
.icon-Dice-3 \e872
.icon-Dice-2 \e873
.icon-Dice-1 \e874
.icon-Bold \e875
.icon-Italic \e876
.icon-Football \e877
.icon-Card \e878
.icon-Card-alt \e879
.icon-Cards \e87A
.icon-Cards-alt \e87B
.icon-Field \e87C
.icon-Hamburger \e87D
.icon-Close \e87E
.icon-Arrow-alt-left \e87F
.icon-Arrow-alt-right \e880
.icon-Arrow-alt-up \e881
.icon-Arrow-alt-down \e882
.icon-Standfirst \e887
.icon-Kicker \e888
<span class="{$modifiers}"></span>