Skip to content

Replace service names with its SVG icon #53

Description

@stevepiercy

On Team we should replace the service name with an SVG icon with <img src="path/to/service.svg" alt="service_name" class="img-inline">. We should also replace the footer text.

The CSS class should specify the icon's dimensions, padding, and alignment to inline text.

Although there are services like Font Awesome that do this with an <i> tag, I think a font adds unnecessary bloat for our little site.

These are the services that could use replacement.

GitHub

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM319.7 160C231.3 160 160 232.2 160 320.6C160 390 204.1 447.5 263.4 469C271.8 472.1 280 466.5 280 458.1L280 433.1C275.6 435 270 436.2 265 436.2C244.4 436.2 232.2 425 223.4 404C220 395.6 216.2 390.6 209 389.6C205.3 389.3 204 387.7 204 385.8C204 382.1 210.2 379.2 216.5 379.2C225.6 379.2 233.4 384.8 241.5 396.4C247.7 405.5 254.3 409.5 262.1 409.5C269.9 409.5 274.9 406.7 282.1 399.5C287.4 394.2 291.5 389.5 295.2 386.4C253.9 381.4 224.9 351.7 224.9 313.3C224.9 297.7 230.5 280.8 239.9 269.5C235.8 259.2 236.5 237.3 241.1 228.3C253.6 226.7 270.5 233.3 280.5 242.4C292.4 238.7 304.9 236.8 320.2 236.8C335.5 236.8 348 238.7 359.3 242.1C369 233.3 386.2 226.8 398.7 228.3C403.1 236.7 403.7 258.6 399.6 269.2C409.6 281.1 414.9 297 414.9 313.3C414.9 351.7 385.8 380.8 344 386.1C354.6 393 361.8 408 361.8 425.2L361.8 457.7C361.8 467.1 369.6 472.4 379 468.6C435.6 447 479.9 390.5 479.9 320.5C479.9 232.1 408 159.9 319.6 159.9z"/></svg>

Mastodon

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M529 243.1C529 145.9 465.3 117.4 465.3 117.4C402.8 88.7 236.7 89 174.8 117.4C174.8 117.4 111.1 145.9 111.1 243.1C111.1 358.8 104.5 502.5 216.7 532.2C257.2 542.9 292 545.2 320 543.6C370.8 540.8 399.3 525.5 399.3 525.5L397.6 488.6C397.6 488.6 361.3 500 320.5 498.7C280.1 497.3 237.5 494.3 230.9 444.7C230.3 440.1 230 435.4 230 430.8C315.6 451.7 388.7 439.9 408.7 437.5C464.8 430.8 513.7 396.2 519.9 364.6C529.7 314.8 528.9 243.1 528.9 243.1zM453.9 368.3L407.3 368.3L407.3 254.1C407.3 204.4 343.3 202.5 343.3 261L343.3 323.5L297 323.5L297 261C297 202.5 233 204.4 233 254.1L233 368.3L186.3 368.3C186.3 246.2 181.1 220.4 204.7 193.3C230.6 164.4 284.5 162.5 308.5 199.4L320.1 218.9L331.7 199.4C355.8 162.3 409.8 164.6 435.5 193.3C459.2 220.6 453.9 246.3 453.9 368.3L453.9 368.3z"/></svg>

LinkedIn

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 160C544 124.7 515.3 96 480 96L160 96zM165 266.2L231.5 266.2L231.5 480L165 480L165 266.2zM236.7 198.5C236.7 219.8 219.5 237 198.2 237C176.9 237 159.7 219.8 159.7 198.5C159.7 177.2 176.9 160 198.2 160C219.5 160 236.7 177.2 236.7 198.5zM413.9 480L413.9 376C413.9 351.2 413.4 319.3 379.4 319.3C344.8 319.3 339.5 346.3 339.5 374.2L339.5 480L273.1 480L273.1 266.2L336.8 266.2L336.8 295.4L337.7 295.4C346.6 278.6 368.3 260.9 400.6 260.9C467.8 260.9 480.3 305.2 480.3 362.8L480.3 480L413.9 480z"/></svg>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions