Using 图标
图标 work great to accompany text and set items apart on your pages. Long gone are the days of designing or browsing for the perfect icon—we have found that Google’s Material 图标 fulfill many of our requirements and have made these available to you right inside OU Campus.
Icon styles
你 can choose between three sizes and three colors when inserting icons, but before doing so, let’s cover some general guidelines to ensure they look great alongside your content.
脸脸脸
UNC蓝色
small, medium, large
脸脸脸
UNC黄金
small, medium, large
Don't use blue icons on dark colored or blue backgrounds. They're perfect for 白色 backgrounds. Stay away from gold icons if your background is butter or another similar color.
脸脸脸
白色
small, medium, large
脸脸脸
白色
small, medium, large
White icons are suitable for most dark backgrounds. If you can't find an appropriate icon color to use, please leave them out.
脸The large icon over powers this small text.
Don't mix icon and text sizes. Be mindful of surrounding space.
标题3 motorcycle
标题4 directions_boat
Heading 5 gold local_pizza
标题6 安卓
Avoid using icons in headers. This is important for SEO and semantics.
Do it today!! local_mall 脸 明星
明星明星 明星 立即购买 明星 明星 明星
版权 Surf Science, 2016
Don't use icons sequentially, to create new styles, or when not needed.
Finding appropriate icons
The most important thing to remember is that icons should support your content, not replace it—when used properly, they should add additional value to your page and eliminate the need for your visitors to overthink the action they are about to take. 保持 this in mind, they also have the potential to confuse visitors. Don’t use icons strictly for navigation, rather use them to assist visitors by directing them to content they may find important.
To make sure you’re familiar with the available icons, it is important to review them before inserting on your pages. When you’re 准备好了 to insert an icon, use your best 判断. If you’re having trouble finding an icon, leave it out—we don’t want to confuse visitors.
Below is an example with icons used correctly.
To complete the FAFSA:
person_outline
有你的 Federal Student Aid ID (FSA ID) 准备好了
info_outline
Use UNC’s School Code 001349
compare_arrows
Expedite your application by using the IRS Data Retrieval Option
完成
适用于 fafsa.政府
A note about accessibility
Thinking in terms of accessibility for our visitors using assistive technology, using appropriate icons becomes especially important. For example, the “event seat” icon might look like a plain old chair to you or me, but this might not make the most sense when placed next to information about a classroom to a visitor using a screen reader. Because screen readers rely on image descriptions to tell users what the image is (via alt-tags when inserting images), most screen readers will read the name of the icon you are using. Because the “group work” icon almost looks like a really gourmet pizza with extravagant toppings, this icon also has the potential to be misused. 你 are sure to find many icons like this, but using your best 判断 is greatly appreciated.
