{"id":21944,"date":"2024-06-20T08:56:59","date_gmt":"2024-06-19T23:56:59","guid":{"rendered":"http:\/\/localhost\/blog\/?page_id=21944"},"modified":"2024-09-24T11:35:21","modified_gmt":"2024-09-24T11:35:21","slug":"guide-en-icon","status":"publish","type":"post","link":"https:\/\/wordpress.pandassi.com\/hellopanda\/guide-en-icon\/","title":{"rendered":"Inserting a Icon"},"content":{"rendered":"\n
<\/span>\"\"
\n
\n

HELLOPANDA MANUAL<\/p>\n\n\n\n

Icon Block \/ Font Icon<\/strong><\/p>\n\n\n\n

<\/rect><\/svg><\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\nhome<\/span>\n\n\n\ngrade<\/span>\n\n\n\nscience<\/span>\n\n\n\nsignal_cellular_alt<\/span>\n\n\n\nturn_sharp_right<\/span>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n

01<\/strong><\/p>\n<\/div>\n\n\n\n

\n
\n

Icon Block (Google Font)<\/p>\n\n\n\n

hellopanda WP manual<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n
\n

google font
Material Symbols<\/p>\n\n\n\n

<\/path><\/svg><\/div><\/div>\n<\/div>\n\n\n\n
\n
\n
\n

Hellopanda theme adopts Google Material Icon as the icon font. It is one of the most trusted Google services.<\/p>\n\n\n\n

Material Symbol is a modern icon that integrates over 3,271 glyphs into a single font file with many design variations. Symbols are available in three styles and four adjustable variable font styles (fill, weight, grade, and optical size).<\/p>\n<\/div>\n\n\n\n

\n

Since the CSS is loaded through a CDN, there may be a difference in speed depending on the status of Google’s server, but since it is a font that is widely used, it is likely to be cached on the user’s computer, so it is likely to be faster than any other CDN in terms of speed.<\/p>\n\n\n\n

The options in use are Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0. Depending on the version, the icon may not appear, but it is best to assume that this rarely happens.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

1.<\/p>\n\n\n\n

\n

Run the block editor.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

2.<\/p>\n\n\n\n

\n

Select the Block Inserter toggle.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

3.<\/p>\n\n\n\n

\n

Select Icon Block from the Hellopanda category.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

4.<\/p>\n\n\n\n

\n

When an empty icon block is created, select the block.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then check the design block editing panel opened on the right side of the screen.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

5.<\/p>\n\n\n\n

\n

You can select a recommended icon and set the icon size.
The icon size is in em units (a unit that inherits the parent font size) and can be entered in decimal units.<\/p>\n\n\n\n

If you want to see more iPhone fonts<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can visit this link to see the full list of Google Fonts.
Please refer to the image below to get the icon code.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Enter the code you obtained into the code input box and the desired icon will be inserted.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n\n\n\n
\n
\n
\n
\n
\n
\n
\n

02<\/strong><\/p>\n<\/div>\n\n\n\n

\n
\n

SVG icon block (external plugin)<\/p>\n\n\n\n

hellopanda WP manual<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n
\n
\n
\n
\n
The Icon Block<\/a><\/blockquote>