Modify Icons

Permalink Browser Info Environment
Hello,

Thanks for such a great theme!

I am customizing a deployment of 8.5.4 with Pixel2.

For our use of the feature block, we can not find suitable icons for the content and have artwork we would like to use instead.

Can you please illustrate what process may exist to add icons for use here?

Thank you for your time.

2 Attachments

Type: Ticket
Status: Archived
deepsoular
View Replies:
shahroq replied on at Permalink Reply
shahroq
Hi,
The most straightforward solution for this is to copy one of the Pixel block templates, in your case the `feature` block template, into `\application\blocks\feature\` folder and hardcode the icon name in the template.
In order to introduce new icons to the theme, you can included the necessary CSS codes in the `custom.dev.less` file. For detailed info on this part, you can check the `Instructions` page #18.

But if you need to include the new icon list to your `feature` block, you have to change the core `feature` block controller. In this case, you can consult the concrete5 docs/general forum.
deepsoular replied on at Permalink Reply
deepsoular
Thank You for your response, if you could elaborate a little bit with examples

"The most straightforward solution for this is to copy one of the Pixel block templates, in your case the `feature` block template, into `\application\blocks\feature\` folder and hardcode the icon name in the template."
If i have a collection of png files what would hardcoding look like?


"In order to introduce new icons to the theme, you can included the necessary CSS codes in the `custom.dev.less` file. For detailed info on this part, you can check the `Instructions` page #18."
I have a custom.dev.less in action already, What would updates to this file this look like?

But if you need to include the new icon list to your `feature` block, you have to change the core `feature` block controller. In this case, you can consult the concrete5 docs/general forum.
shahroq replied on at Permalink Reply
shahroq
Hi,
Re the `custom.dev.less`, you need to insert the icon CSS codes into this file. I am not sure what kind of icon or icon set you are intending to apply here, but if it's any CSS styles for that, you can use this file to make them available globally.
In respect of templating, the current `Feature` block templates are using the theme built-in Font-Awesome icons. And the designated icon comes from the core `Feature` block template, which the user chooses via block editing UI. Required steps for hardcoding a new icon are as follows:
1. Select a template you mean to use from `\packages\theme_pixel\blocks\feature\templates` and copy/rename it into `\application\blocks\fature`
2. Look for `i` tag in the file in which the icon is rendered, and replace it with your icon of choice.
Now you should be able to choose your custom template via site editing UI.

It might be a challenging task if you don't know your way around the code, but these steps should get you there. If you didn't manage to do it, contact me via private message with further info about your icon/icon set and I will prepare a sample for you.

Cheers
deepsoular replied on at Permalink Reply
deepsoular
Im Grateful for your guidance.

This is where I am at.
I have converted my SVG files using icomoon.
I have a .woff file that contains my new icon set.

custom.dev.less gets updated with something like this:
@font-face {
  font-family: 'custom_icons';
  src: url('icomoon.woff') format('woff');
}


and then I need to copy my feature block and modify it to load the alternate icons?

This is the feature, I have copied it and the code looks like this

<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
<?php
$customClass = '';
$styleObject = $this->block->getCustomStyle();
if ($styleObject) {
    $styleSetObject = $styleObject->getStyleSet();
    $customClass = $styleSetObject->getCustomClass();
}
?>
<div class="feature-box <?php echo $customClass ?>" data-area="<?php echo $this->block->getAreaHandle() ?>" data-block="<?php echo $this->block->getBlockTypeHandle() ?>" data-template="<?php echo basename($this->block->getBlockFilename(), '.php') ?>">
    <div class="fbox-icon">
        <?php if ($linkURL) { ?>
        <a href="<?php echo $linkURL?>">
        <?php } ?>
            <i class="fa fa-<?php echo $icon?> i-alt"></i>


the package from icomoon came with js that looks like this:

if (!('boxShadow' in document.body.style)) {
    document.body.setAttribute('class', 'noBoxShadow');
}
document.body.addEventListener("click", function(e) {
    var target = e.target;
    if (target.tagName === "INPUT" &&
        target.getAttribute('class').indexOf('liga') === -1) {
        target.select();
    }
});
(function() {
    var fontSize = document.getElementById('fontSize'),
        testDrive = document.getElementById('testDrive'),
        testText = document.getElementById('testText');
    function updateTest() {

a css sheet like this
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #555;
  background: #fff;
}
h1 {
  font-size: 1.5em;
  font-weight: normal;
}
small {
  font-size: .66666667em;

and a html demo like this
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IcoMoon Demo</title>
    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css"></head>
<body>
    <div class="bgc1 clearfix">
        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 9)</small></h1>
    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
shahroq replied on at Permalink Reply
shahroq
Hi,
You seem to be on the right track & should be able to use the new icon set now by editing the copied template. Also, you can house extra js code inside the `custom.dev.js` file (see Instructions #18.1).
All things considered, if you still couldn't achieve the desired result, send me your icon set via private msg and I will make you a sample template.
Cheers,
ConcreteCMS replied on at Permalink Reply
ConcreteCMS
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

concrete5 Environment Information

LIGHTSPEED-

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:72.0) Gecko/20100101 Firefox/72.0

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.