CEL ICONS

Examples

These examples show how to use the icons in the following ways:

HTML element with the appropriate classes to embed the icon.
CSS pseudo-class. You have to declare a unique unicode (found on the icon detail page) to the content property, as well as assign the icon font 'celicons' to the font-family property.
Direct link to the image file (found on the icon detail page).

Note: These examples may not look the same in your course as they do here, due to conflicts with existing CSS. Please use these as learning examples, and not direct use cases.

Headings

HTML element

Activity

Case Study

Discussion

Assignment

HTML

<h2><span class="celicon-{icon name}-line celicon-m"></span>Assignment</h2>

CSS

h2 span {
    position: relative;
    top: 15px;
}

CSS pseudo-class

Activity

Case Study

Discussion

Assignment

HTML

<h2 class="{custom class name}">Assignment</h2>

CSS

h2.{custom class name}:before {
    content: '\e902'; /* Unicode found on the icon detail page */
    font-family: 'celicons';
    font-size: 64px;
    font-weight: 300;
    position: relative;
    top: 15px;
}

Direct link/image

Activity

Case Study

Discussion

Assignment

HTML

<h2><img src="https://cel-icons.cel.uwaterloo.ca/SVG/activity-line.svg" style="width:64px;height:64px;" />Activity</h2>

Callouts

HTML element

Callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed velit eu sapien mollis tincidunt sit amet in massa. Curabitur ultrices pharetra dui, ut accumsan justo pretium ut. Maecenas consectetur in turpis at feugiat. Maecenas nec ipsum nibh. Donec eget mattis mauris. Phasellus fringilla lorem massa.

HTML

<div class="callout">
    <h2><span class="celicon-activity-line celicon-m"></span>Callout</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

CSS

.callout {
    background:#f7f9fb;
    border:1px solid #8894a7;
    border-radius:20px;
    box-shadow: 0px 10px 0 -5px #5f6b7b;
    margin:50px;
    padding:20px; 
}
.callout h2 {
    margin: -20px 0 20px -10px;
}
.callout h2 span {
    position:relative;
    top:15px;
}

CSS pseudo-class

Callout

HTML

<div class="callout">
    <h2>Callout</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

CSS

.callout {
    background:#f7f9fb;
    border:1px solid #8894a7;
    border-radius:20px;
    box-shadow: 0px 10px 0 -5px #5f6b7b;
    margin:50px;
    padding:20px; 
}
.callout h2 {
    margin: -20px 0 20px -10px;
}
.callout h2:before {
    content: '\e902'; /* Unicode found on the icon detail page */
    font-family: 'celicons';
    font-size: 64px;
    font-weight: 300;
    position: relative;
    top: 15px;
}

Direct link/image

Callout

HTML

<div class="callout">
    <h2><img src="https://cel-icons.cel.uwaterloo.ca/SVG/activity-line.svg" style="width:64px;height:64px;" />Callout</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

CSS

.callout {
    background:#f7f9fb;
    border:1px solid #8894a7;
    border-radius:20px;
    box-shadow: 0px 10px 0 -5px #5f6b7b;
    margin:50px;
    padding:20px; 
}
.callout h2 {
    margin: 0;
}