Importance
This written training is to help web developers insert iconography and graphic elements in your website using the shared brand web assets and CSS. This makes locating the icon you want to use easier and faster.
Target Audience
- Web Dev/IT
Brand Guidance
Instructions
1. Visit the shared brand web assets and collect the corresponding link tag to add the stylesheet to your HTML document.
2. After you add the stylesheet, you can insert icons just like you would if they were in a folder in your website’s directory.
Example of the blue admissions icon:
<img src="https://cdn.brand.illinois.edu/icons/duo/blue/admissions.png" alt="admissions">
To find this path, hover over the link below the icon you’d like to add.
Right-clicking on Windows or Ctrl click on a Mac over the PNG under the icon of choice will allow you to select copy link. Paste this in the “src” portion of the image tag and place it in your website like usual.
3. Insert Graphic elements using the same steps above or downloading the element from our Graphic elements page.
For the example below we insert the graphic element into our stylesheet as follows:
.ascend{
background: url(cdn link or link to svg in your web directory) var(--il-storm-lighter-3) ;
}
In this example, the background is set to have the white diagonal lines with a gray background using the color variables from the shared brand web assets:
The HTML looks like this:
<div class="ascend lines-fade">
<h1 class="lower-orange-bar ">{{ title }}</h1>
</div>
Where ascend and lines-fade create the background style. The fading gradient is achieved by the lines-fade class:
.lines-fade{
position: relative;
}
.lines-fade::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(244,244,244,1) 17%, rgba(255,255,255,0) 100%);
z-index: 1;
}
Contact
Sydney Flowers, Front End Web Developer, sydbeth@illinois.edu