Icon Spacing and Sizing

8 replies · opened Jul 20, 2021

SSISCANJul 20, 2021

Hi
Referring to https://adm-cba.rof.ca/CusC/CusC_LA.php
Credentials: –
UserName: SemiColon
Password: SC4321

Question # 1
We are using to space the Icons, is there another way?

Sample: -
<div>
<span>

</span>
</div>

Question # 2

Is there a way to enlarge the Icons?

Thank you.

Regards
Barry

SSemicolon WebSTAFFJul 21, 2021

Hello,

We were not able to check the Page with the Login Information you have provided, however, changing the Spacing and Sizing of the Icons can be done simply by the usage of Utility Classes:

  1. For Spacing, simply use the Bootstrap Utility Classes: https://getbootstrap.com/docs/5.0/utilities/spacing/ like .me-3 on the `` Tag.

  2. To enlarge the Icons, simply use .i-large Class. More Examples can be found here: https://themes.semicolonweb.com/html/canvas/styled-icons.html .

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSemicolon WebSTAFFJul 21, 2021

Hello,

The Correct Codes will be:
[ch_pre][/ch_pre]

However, since you are using Bootstrap 4, you must be using this code:
[ch_pre][/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSemicolon WebSTAFFJul 22, 2021

Hello,

.mr-5 is used to represent it as a Class. When you use it in your Codes, you will need to use it as just mr-5 (without the dot).

This will automatically fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSISCANJul 22, 2021

Thanks you.

1 more question on an iPhone 8 the icons show vertically instead of horizontally, see screen clipping uploaded.

Is there any setting required?

Thanks.

SSemicolon WebSTAFFJul 22, 2021

Hello,

This unfortunately, is due to the amount of space available. You can consider using the Responsive Spacing Utility Classes. Eg. .mr-3 and .mr-md-5 together. Example:
[ch_pre][/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSISCANJul 22, 2021

Thank you.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard