Customize Magento 2 Blank theme

Question

I have setup my custom theme and using Magento 2 Blank theme as the parent theme <parent>Magento/blank</parent>

1. I like the Luma icons more. How do I add the Luma icons in my custom theme?
2. The Luma homepage have styles for the content-heading. Where/in which less file are those styles added in the Luma theme? And what are best practices to add those to my own custom theme?
3. I want to style the wishlist, compare and email links (below tocart button) on the productview page exactly like Luma theme. I see in /vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/_module.less‌​ those styles. Do I have to copy those styles over to /app/design/frontend/Vendor/theme/web/css/source/_theme.less? Or is there a better/other preferred way to do it?
4. I want to style the tabs on the productview page exactly like Luma theme. So it has a border around it? Where are those less styles in Luma theme and where do I have to add those styles?

Update:

1. If you look at Luma's <div class="panel wrapper">, they added a background-color. What is the preferred way to add this class and it's variable to my custom theme? (I know in Luma theme it's living in /vendor/magento/theme-frontend-luma/Magento_Theme/web/css/source/_module.less. But how do I get this in my own theme? What is the preferred workflow?

Answer 1

Look at vendor/magento/theme-fronted-luma/web/css/source/_theme.less (line 19-20) and you will find:

@icons__font-path: '@{baseDir}fonts/Luma-Icons';
@icons__font-name: 'luma-icons';

inside vendor/magento/theme-fronted-luma/web you will also find the fonts dir. Try to copy the font dir in the appropriate dir inside your custom theme and change the 2 less variables.

• meez: I tried above method already. But then the icons are too large everywhere? The font-size is then 35px. In Luma it's 22px for all the icons and the line-height: 28px;. How do I fix this? But what about this approach? And what about my second question about content-heading styles?
• Lorenzo: You can always add some css to fix icons size. About content-heading i didn't find any reference inside luma theme, maybe it comes with sample data
• meez: Thanks. I am a bit lost in what is best way customizing blank theme. Example 1: I want to style the wishlist, compare and email links (below tocart button) on the productview page exactly like Luma theme. I see in /vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/_module.less those styles. Do I have to copy those styles over to /app/design/frontend/Vendor/theme/web/css/source/_theme.less? Or is there a better/other preferred way to do it? Example 2: I want to style the tabs on the productview page exactly like Luma theme. So it has a border around it?
• Lorenzo: but if you want to style blank like luma theme, why don't you start with luma directly? (luma is based on blank however)
• meez: Thats what I tried but I get issues when use luma as parent theme like I described here. If it's possible I definitely want to use Luma as parent theme! But why do I have those issues? I didn't find a solution yet... Thanks